
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>HTML基础 · AGou's StudyNote</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="AGou">
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-anchors/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-tbfed-pagefooter/footer.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-expandable-chapters-small/expandable-chapters-small.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-anchor-navigation-ex/style/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-prism/prism-tomorrow.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-insert-logo/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search-pro/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-splitter/splitter.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-lightbox/css/lightbox.min.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-donate/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-code/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="WEB基础.html" />
    
    
    <link rel="prev" href="./" />
    

    <style>
    @media only screen and (max-width: 640px) {
        .book-header .hidden-mobile {
            display: none;
        }
    }
    </style>
    <script>
        window["gitbook-plugin-github-buttons"] = {"repo":"AGou-ops/myStudyNote","types":["star","watch","fork"],"size":"small"};
    </script>

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    
    
        
        <li>
            <a href="http://agou-ops.github.io" target="_blank" class="custom-link">◆点击进入我的个人博客</a>
        </li>
    
    

    
    <li class="divider"></li>
    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                        <b>1.1.</b>
                    
                    关于我
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../Program_lang/">
            
                <a href="../Program_lang/">
            
                    
                        <b>1.2.</b>
                    
                    编程语言
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../Program_lang/Python.html">
            
                <a href="../Program_lang/Python.html">
            
                    
                        <b>1.2.1.</b>
                    
                    Python
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../Program_lang/Java.html">
            
                <a href="../Program_lang/Java.html">
            
                    
                        <b>1.2.2.</b>
                    
                    Java
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../Program_lang/Splash_Lua.html">
            
                <a href="../Program_lang/Splash_Lua.html">
            
                    
                        <b>1.2.3.</b>
                    
                    Splash_Lua
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../Database/">
            
                <a href="../Database/">
            
                    
                        <b>1.3.</b>
                    
                    数据库
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../Database/Mysql、MariaDB/README.md">
            
                <span>
            
                    
                        <b>1.3.1.</b>
                    
                    Mysql/MariaDB
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1.1" data-path="../Database/Mysql、MariaDB/MySQL、MariaDB基础.html">
            
                <a href="../Database/Mysql、MariaDB/MySQL、MariaDB基础.html">
            
                    
                        <b>1.3.1.1.</b>
                    
                    MySQL/MariaDB基础
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.1.2" data-path="../Database/Mysql、MariaDB/php-mysql.html">
            
                <a href="../Database/Mysql、MariaDB/php-mysql.html">
            
                    
                        <b>1.3.1.2.</b>
                    
                    php-mysql
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../Database/MongoDB.html">
            
                <a href="../Database/MongoDB.html">
            
                    
                        <b>1.3.2.</b>
                    
                    MongoDB
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="../Database/Redis.html">
            
                <a href="../Database/Redis.html">
            
                    
                        <b>1.3.3.</b>
                    
                    Redis
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../Linux/">
            
                <a href="../Linux/">
            
                    
                        <b>1.4.</b>
                    
                    Linux
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../Linux/Linux基础.html">
            
                <a href="../Linux/Linux基础.html">
            
                    
                        <b>1.4.1.</b>
                    
                    Linux基础
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../Linux/Linux启动流程、内核、grub、模块、内核的编译、anaconda自动化.html">
            
                <a href="../Linux/Linux启动流程、内核、grub、模块、内核的编译、anaconda自动化.html">
            
                    
                        <b>1.4.2.</b>
                    
                    Linux启动流程、内核、grub、模块等
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../Linux/Linux服务器.html">
            
                <a href="../Linux/Linux服务器.html">
            
                    
                        <b>1.4.3.</b>
                    
                    Linux服务器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="../Linux/Linux状态信息.html">
            
                <a href="../Linux/Linux状态信息.html">
            
                    
                        <b>1.4.4.</b>
                    
                    Linux状态信息
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="../Linux/Linux网络客户端工具.html">
            
                <a href="../Linux/Linux网络客户端工具.html">
            
                    
                        <b>1.4.5.</b>
                    
                    Linux网络客户端工具
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" data-path="../Linux/Linux网络配置.html">
            
                <a href="../Linux/Linux网络配置.html">
            
                    
                        <b>1.4.6.</b>
                    
                    Linux网络配置
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.7" data-path="../Linux/Linux配置文件.md">
            
                <span>
            
                    
                        <b>1.4.7.</b>
                    
                    Linux配置文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.8" data-path="../Linux/Linux时间服务器.html">
            
                <a href="../Linux/Linux时间服务器.html">
            
                    
                        <b>1.4.8.</b>
                    
                    Linux时间服务器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.9" data-path="../Linux/Linux日志管理系统.html">
            
                <a href="../Linux/Linux日志管理系统.html">
            
                    
                        <b>1.4.9.</b>
                    
                    Linux日志管理系统
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.10" data-path="../Linux/sudo详解.html">
            
                <a href="../Linux/sudo详解.html">
            
                    
                        <b>1.4.10.</b>
                    
                    sudo详解
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.11" data-path="../Linux/SElinux.html">
            
                <a href="../Linux/SElinux.html">
            
                    
                        <b>1.4.11.</b>
                    
                    SELinux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.12" data-path="../Linux/iptables.html">
            
                <a href="../Linux/iptables.html">
            
                    
                        <b>1.4.12.</b>
                    
                    iptables
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.13" data-path="../Linux/Linux_shell.html">
            
                <a href="../Linux/Linux_shell.html">
            
                    
                        <b>1.4.13.</b>
                    
                    Linux Shell
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.14" data-path="../Linux/shell_awk.html">
            
                <a href="../Linux/shell_awk.html">
            
                    
                        <b>1.4.14.</b>
                    
                    shell_awk
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.15" data-path="../Linux/OpenSSL、PKI搭建、算法.html">
            
                <a href="../Linux/OpenSSL、PKI搭建、算法.html">
            
                    
                        <b>1.4.15.</b>
                    
                    OpenSSL、PKI搭建
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.16" data-path="../Linux/DNS服务器.html">
            
                <a href="../Linux/DNS服务器.html">
            
                    
                        <b>1.4.16.</b>
                    
                    DNS服务器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.17" data-path="../Linux/Frp内网穿透.html">
            
                <a href="../Linux/Frp内网穿透.html">
            
                    
                        <b>1.4.17.</b>
                    
                    Frp内网穿透
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.18" data-path="../Linux/Linux其他.md">
            
                <span>
            
                    
                        <b>1.4.18.</b>
                    
                    Linux其他
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../Linux_FileSystem/">
            
                <a href="../Linux_FileSystem/">
            
                    
                        <b>1.5.</b>
                    
                    Linux文件系统
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../Linux_FileSystem/FTP.html">
            
                <a href="../Linux_FileSystem/FTP.html">
            
                    
                        <b>1.5.1.</b>
                    
                    FTP
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../Linux_FileSystem/SAMBA.html">
            
                <a href="../Linux_FileSystem/SAMBA.html">
            
                    
                        <b>1.5.2.</b>
                    
                    SAMBA
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../Linux_Tools/">
            
                <a href="../Linux_Tools/">
            
                    
                        <b>1.6.</b>
                    
                    Linux工具
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../Linux_Tools/fzf工具.html">
            
                <a href="../Linux_Tools/fzf工具.html">
            
                    
                        <b>1.6.1.</b>
                    
                    fzf工具
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../Linux_Tools/工具集合.html">
            
                <a href="../Linux_Tools/工具集合.html">
            
                    
                        <b>1.6.2.</b>
                    
                    Linux工具集合
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="./">
            
                <a href="./">
            
                    
                        <b>1.7.</b>
                    
                    网站服务器
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter active" data-level="1.7.1" data-path="HTML基础.html">
            
                <a href="HTML基础.html">
            
                    
                        <b>1.7.1.</b>
                    
                    HTML基础
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.2" data-path="WEB基础.html">
            
                <a href="WEB基础.html">
            
                    
                        <b>1.7.2.</b>
                    
                    WEB基础
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.3" data-path="httpd.html">
            
                <a href="httpd.html">
            
                    
                        <b>1.7.3.</b>
                    
                    httpd/Apache
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.4" data-path="httpd.conf文件详解.html">
            
                <a href="httpd.conf文件详解.html">
            
                    
                        <b>1.7.4.</b>
                    
                    httpd.conf文件详解
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.5" data-path="Nginx.html">
            
                <a href="Nginx.html">
            
                    
                        <b>1.7.5.</b>
                    
                    Nginx
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.6" data-path="HTTP状态码-详情.html">
            
                <a href="HTTP状态码-详情.html">
            
                    
                        <b>1.7.6.</b>
                    
                    HTTP状态码-详情
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../Common_Framework/">
            
                <a href="../Common_Framework/">
            
                    
                        <b>1.8.</b>
                    
                    常用框架
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.8.1" data-path="../Common_Framework/LNMP.html">
            
                <a href="../Common_Framework/LNMP.html">
            
                    
                        <b>1.8.1.</b>
                    
                    LNMP
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.2" data-path="../Common_Framework/LAMP.html">
            
                <a href="../Common_Framework/LAMP.html">
            
                    
                        <b>1.8.2.</b>
                    
                    LAMP
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../Docker&K8s/">
            
                <a href="../Docker&K8s/">
            
                    
                        <b>1.9.</b>
                    
                    容器及容器编排
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.1" data-path="../Docker&K8s/Docker/Docker.html">
            
                <a href="../Docker&K8s/Docker/Docker.html">
            
                    
                        <b>1.9.1.</b>
                    
                    Docker
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.1.1" data-path="../Docker&K8s/Docker/Docker.html">
            
                <a href="../Docker&K8s/Docker/Docker.html">
            
                    
                        <b>1.9.1.1.</b>
                    
                    Docker
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.9.2" data-path="../Docker&K8s/K8s/">
            
                <a href="../Docker&K8s/K8s/">
            
                    
                        <b>1.9.2.</b>
                    
                    K8s
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.2.1" data-path="../Docker&K8s/K8s/K8s基础知识.html">
            
                <a href="../Docker&K8s/K8s/K8s基础知识.html">
            
                    
                        <b>1.9.2.1.</b>
                    
                    K8s基础知识
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.2.2" data-path="../Docker&K8s/K8s/K8s安装与部署.html">
            
                <a href="../Docker&K8s/K8s/K8s安装与部署.html">
            
                    
                        <b>1.9.2.2.</b>
                    
                    K8s安装与部署
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../Git/">
            
                <a href="../Git/">
            
                    
                        <b>1.10.</b>
                    
                    Git
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.10.1" data-path="../Git/Git基础.html">
            
                <a href="../Git/Git基础.html">
            
                    
                        <b>1.10.1.</b>
                    
                    Git基础
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.10.2" data-path="../Git/GitLab服务器.html">
            
                <a href="../Git/GitLab服务器.html">
            
                    
                        <b>1.10.2.</b>
                    
                    GitLab服务器
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.11" data-path="../Windows/">
            
                <a href="../Windows/">
            
                    
                        <b>1.11.</b>
                    
                    Windows系统
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.11.1" data-path="../Windows/cmd命令.html">
            
                <a href="../Windows/cmd命令.html">
            
                    
                        <b>1.11.1.</b>
                    
                    cmd命令
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.12" data-path="../Vim.html">
            
                <a href="../Vim.html">
            
                    
                        <b>1.12.</b>
                    
                    Vim
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.13" data-path="../i3WM快捷键.html">
            
                <a href="../i3WM快捷键.html">
            
                    
                        <b>1.13.</b>
                    
                    i3WM快捷键
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.14" data-path="../ADB命令.html">
            
                <a href="../ADB命令.html">
            
                    
                        <b>1.14.</b>
                    
                    ADB命令
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.15" data-path="../Tmux.html">
            
                <a href="../Tmux.html">
            
                    
                        <b>1.15.</b>
                    
                    Tmux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.16" data-path="../Kindle.html">
            
                <a href="../Kindle.html">
            
                    
                        <b>1.16.</b>
                    
                    Kindle越狱指南
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.17" data-path="../Other/">
            
                <a href="../Other/">
            
                    
                        <b>1.17.</b>
                    
                    Other
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.17.1" data-path="../Other/pandoc.html">
            
                <a href="../Other/pandoc.html">
            
                    
                        <b>1.17.1.</b>
                    
                    pandoc
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.17.2" data-path="../Other/jupyter&reveal.js.html">
            
                <a href="../Other/jupyter&reveal.js.html">
            
                    
                        <b>1.17.2.</b>
                    
                    jupyter & reveal.js
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.17.3" data-path="../Other/json.html">
            
                <a href="../Other/json.html">
            
                    
                        <b>1.17.3.</b>
                    
                    json
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.17.4" data-path="../Other/Reveal_js.html">
            
                <a href="../Other/Reveal_js.html">
            
                    
                        <b>1.17.4.</b>
                    
                    Reveal_js
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >HTML基础</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <div id="anchor-navigation-ex-navbar"><i class="fa fa-anchor"></i><ul><li><a href="#html&#x57FA;&#x7840;&#x6807;&#x7B7E;">1. HTML&#x57FA;&#x7840;&#x6807;&#x7B7E;</a></li><ul><li><a href="#bootstrap-&#x54CD;&#x5E94;&#x5F0F;&#x6846;&#x67B6;">1.1. Bootstrap &#x54CD;&#x5E94;&#x5F0F;&#x6846;&#x67B6;</a></li><li><a href="#xhtml">1.2. XHTML</a></li><ul><li><a href="#xhtml-&#x6307;&#x7684;&#x662F;&#x53EF;&#x6269;&#x5C55;&#x8D85;&#x6587;&#x672C;&#x6807;&#x8BB0;&#x8BED;&#x8A00;&#xFF0C;xhtml-&#x4E0E;-html-401-&#x51E0;&#x4E4E;&#x662F;&#x76F8;&#x540C;&#x7684;">1.2.1. XHTML &#x6307;&#x7684;&#x662F;&#x53EF;&#x6269;&#x5C55;&#x8D85;&#x6587;&#x672C;&#x6807;&#x8BB0;&#x8BED;&#x8A00;&#xFF0C;XHTML &#x4E0E; HTML 4.01 &#x51E0;&#x4E4E;&#x662F;&#x76F8;&#x540C;&#x7684;</a></li><li><a href="#&#x5982;&#x4F55;&#x4ECE;-html-&#x8F6C;&#x6362;&#x5230;-xhtml">1.2.2. &#x5982;&#x4F55;&#x4ECE; HTML &#x8F6C;&#x6362;&#x5230; XHTML</a></li><li><a href="#&#x7528;--&#x7EC4;&#x5408;&#x8868;&#x5355;&#x6570;&#x636E;">1.2.3. &#x7528; \ &#x7EC4;&#x5408;&#x8868;&#x5355;&#x6570;&#x636E;</a></li></ul><li><a href="#html5">1.3. HTML5</a></li><ul><li><a href="#&#x65B0;&#x7684;&#x5C5E;&#x6027;&#x8BED;&#x6CD5;">1.3.1. &#x65B0;&#x7684;&#x5C5E;&#x6027;&#x8BED;&#x6CD5;</a></li><li><a href="#&#x65B0;&#x7279;&#x6027;">1.3.2. &#x65B0;&#x7279;&#x6027;</a></li><li><a href="#html5&#x88AB;&#x5220;&#x9664;&#x5143;&#x7D20;">1.3.3. HTML5&#x88AB;&#x5220;&#x9664;&#x5143;&#x7D20;</a></li><li><a href="#&#x65B0;&#x7684;&#x8BED;&#x4E49;&#x7ED3;&#x6784;&#x5143;&#x7D20;">1.3.4. &#x65B0;&#x7684;&#x8BED;&#x4E49;&#x7ED3;&#x6784;&#x5143;&#x7D20;</a></li><li><a href="#&#x65B0;&#x7684;&#x8868;&#x5355;&#x5143;&#x7D20;">1.3.5. &#x65B0;&#x7684;&#x8868;&#x5355;&#x5143;&#x7D20;</a></li><li><a href="#&#x65B0;&#x7684;&#x8F93;&#x5165;&#x7C7B;&#x578B;">1.3.6. &#x65B0;&#x7684;&#x8F93;&#x5165;&#x7C7B;&#x578B;</a></li><li><a href="#html5&#x56FE;&#x50CF;">1.3.7. HTML5&#x56FE;&#x50CF;</a></li><li><a href="#&#x65B0;&#x7684;&#x5A92;&#x4ECB;&#x5143;&#x7D20;">1.3.8. &#x65B0;&#x7684;&#x5A92;&#x4ECB;&#x5143;&#x7D20;</a></li></ul><li><a href="#&#x4ECE;-html4-&#x8FC1;&#x79FB;&#x81F3;-html5">1.4. &#x4ECE; HTML4 &#x8FC1;&#x79FB;&#x81F3; HTML5</a></li></ul><li><a href="#javascript">2. JavaScript</a></li><li><a href="#css">3. CSS</a></li></ul></div><a href="#html&#x57FA;&#x7840;&#x6807;&#x7B7E;" id="anchorNavigationExGoTop"><i class="fa fa-arrow-up"></i></a><blockquote>
<p> <strong>This is WEB StudyNote.</strong></p>
</blockquote>
<h1 id="html&#x57FA;&#x7840;&#x6807;&#x7B7E;"><a name="html&#x57FA;&#x7840;&#x6807;&#x7B7E;" class="anchor-navigation-ex-anchor" href="#html&#x57FA;&#x7840;&#x6807;&#x7B7E;"><i class="fa fa-link" aria-hidden="true"></i></a>1. HTML&#x57FA;&#x7840;&#x6807;&#x7B7E;</h1>
<pre class="language-"><code class="lang-html">&#x8D85;&#x94FE;&#x63A5;&#x6807;&#x7B7E;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>http://www.w3school.com.cn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>This is a link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<ul>
<li><h3 id="&#x4EE3;&#x8868;&#x6362;&#x884C;"><a name="&#x4EE3;&#x8868;&#x6362;&#x884C;" class="anchor-navigation-ex-anchor" href="#&#x4EE3;&#x8868;&#x6362;&#x884C;"><i class="fa fa-link" aria-hidden="true"></i></a>\ &#x4EE3;&#x8868;&#x6362;&#x884C;</h3>
</li>
<li><h3 id="aligncenter&#x5C45;&#x4E2D;&#xFF0C;bgcolor&#x80CC;&#x666F;&#x989C;&#x8272;"><a name="aligncenter&#x5C45;&#x4E2D;&#xFF0C;bgcolor&#x80CC;&#x666F;&#x989C;&#x8272;" class="anchor-navigation-ex-anchor" href="#aligncenter&#x5C45;&#x4E2D;&#xFF0C;bgcolor&#x80CC;&#x666F;&#x989C;&#x8272;"><i class="fa fa-link" aria-hidden="true"></i></a>align=&quot;center&quot;&#x5C45;&#x4E2D;&#xFF0C;bgcolor&#x80CC;&#x666F;&#x989C;&#x8272;</h3>
</li>
<li><h3 id="&#x521B;&#x5EFA;&#x6C34;&#x5E73;&#x7EBF;"><a name="&#x521B;&#x5EFA;&#x6C34;&#x5E73;&#x7EBF;" class="anchor-navigation-ex-anchor" href="#&#x521B;&#x5EFA;&#x6C34;&#x5E73;&#x7EBF;"><i class="fa fa-link" aria-hidden="true"></i></a>\ &#x521B;&#x5EFA;&#x6C34;&#x5E73;&#x7EBF;</h3>
</li>
<li><h3 id="&#x4E8C;&#x5341;-&#x5341;&#x4E8C;"><a name="&#x4E8C;&#x5341;-&#x5341;&#x4E8C;" class="anchor-navigation-ex-anchor" href="#&#x4E8C;&#x5341;-&#x5341;&#x4E8C;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4E8C;&#x5341; &#x5341;&#x4E8C;</h3>
</li>
<li><h3 id="&#x4E0D;&#x5EFA;&#x8BAE;&#x4F7F;&#x7528;-&#x548C;----&#x5B9A;&#x4E49;&#x5220;&#x9664;&#x7EBF;&#x6587;&#x672C;-----&#x5B9A;&#x4E49;&#x4E0B;&#x5212;&#x7EBF;&#x6587;&#x672C;"><a name="&#x4E0D;&#x5EFA;&#x8BAE;&#x4F7F;&#x7528;-&#x548C;----&#x5B9A;&#x4E49;&#x5220;&#x9664;&#x7EBF;&#x6587;&#x672C;-----&#x5B9A;&#x4E49;&#x4E0B;&#x5212;&#x7EBF;&#x6587;&#x672C;" class="anchor-navigation-ex-anchor" href="#&#x4E0D;&#x5EFA;&#x8BAE;&#x4F7F;&#x7528;-&#x548C;----&#x5B9A;&#x4E49;&#x5220;&#x9664;&#x7EBF;&#x6587;&#x672C;-----&#x5B9A;&#x4E49;&#x4E0B;&#x5212;&#x7EBF;&#x6587;&#x672C;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4E0D;&#x5EFA;&#x8BAE;&#x4F7F;&#x7528;\ &#x548C;\    &#x5B9A;&#x4E49;&#x5220;&#x9664;&#x7EBF;&#x6587;&#x672C; \    &#x5B9A;&#x4E49;&#x4E0B;&#x5212;&#x7EBF;&#x6587;&#x672C;</h3>
</li>
<li><h3 id="style&#x6807;&#x7B7E;&#x4E2D;&#x629B;&#x5F03;&#x4E86;bgcolor&#xFF0C;&#x4F7F;&#x7528;&#x4E86;background-color&#x4EE3;&#x66FF;"><a name="style&#x6807;&#x7B7E;&#x4E2D;&#x629B;&#x5F03;&#x4E86;bgcolor&#xFF0C;&#x4F7F;&#x7528;&#x4E86;background-color&#x4EE3;&#x66FF;" class="anchor-navigation-ex-anchor" href="#style&#x6807;&#x7B7E;&#x4E2D;&#x629B;&#x5F03;&#x4E86;bgcolor&#xFF0C;&#x4F7F;&#x7528;&#x4E86;background-color&#x4EE3;&#x66FF;"><i class="fa fa-link" aria-hidden="true"></i></a>style&#x6807;&#x7B7E;&#x4E2D;&#x629B;&#x5F03;&#x4E86;bgcolor&#xFF0C;&#x4F7F;&#x7528;&#x4E86;background-color&#x4EE3;&#x66FF;</h3>
</li>
<li><h3 id="&#x9884;&#x683C;&#x5F0F;&#x6587;&#x672C;&#xFF0C;&#x7528;&#x4E8E;&#x586B;&#x5145;&#x4EE3;&#x7801;"><a name="&#x9884;&#x683C;&#x5F0F;&#x6587;&#x672C;&#xFF0C;&#x7528;&#x4E8E;&#x586B;&#x5145;&#x4EE3;&#x7801;" class="anchor-navigation-ex-anchor" href="#&#x9884;&#x683C;&#x5F0F;&#x6587;&#x672C;&#xFF0C;&#x7528;&#x4E8E;&#x586B;&#x5145;&#x4EE3;&#x7801;"><i class="fa fa-link" aria-hidden="true"></i></a>\&#x9884;&#x683C;&#x5F0F;&#x6587;&#x672C;&#xFF0C;&#x7528;&#x4E8E;&#x586B;&#x5145;&#x4EE3;&#x7801;</h3>
</li>
<li><h3 id="targetblank&#x4ECE;&#x65B0;&#x7A97;&#x53E3;&#x6253;&#x5F00;&#x65B0;&#x7684;&#x6807;&#x7B7E;&#xFF0C;&#x7F6E;&#x4E8E;a&#x6807;&#x7B7E;&#x4E2D;--targettop&#x8986;&#x76D6;&#x5F53;&#x524D;&#x9875;"><a name="targetblank&#x4ECE;&#x65B0;&#x7A97;&#x53E3;&#x6253;&#x5F00;&#x65B0;&#x7684;&#x6807;&#x7B7E;&#xFF0C;&#x7F6E;&#x4E8E;a&#x6807;&#x7B7E;&#x4E2D;--targettop&#x8986;&#x76D6;&#x5F53;&#x524D;&#x9875;" class="anchor-navigation-ex-anchor" href="#targetblank&#x4ECE;&#x65B0;&#x7A97;&#x53E3;&#x6253;&#x5F00;&#x65B0;&#x7684;&#x6807;&#x7B7E;&#xFF0C;&#x7F6E;&#x4E8E;a&#x6807;&#x7B7E;&#x4E2D;--targettop&#x8986;&#x76D6;&#x5F53;&#x524D;&#x9875;"><i class="fa fa-link" aria-hidden="true"></i></a>target=&quot;_blank&quot;&#x4ECE;&#x65B0;&#x7A97;&#x53E3;&#x6253;&#x5F00;&#x65B0;&#x7684;&#x6807;&#x7B7E;&#xFF0C;&#x7F6E;&#x4E8E;a&#x6807;&#x7B7E;&#x4E2D;  target=&quot;_top&#x8986;&#x76D6;&#x5F53;&#x524D;&#x9875;</h3>
</li>
<li><h3 id="-&#x57FA;&#x672C;&#x7684;&#x6CE8;&#x610F;&#x4E8B;&#x9879;---&#x6709;&#x7528;&#x7684;&#x63D0;&#x793A;&#x521B;&#x5EFA;&#x951A;&#xFF08;&#x76F8;&#x5F53;&#x4E8E;&#x4E66;&#x7B7E;&#xFF09;"><a name="-&#x57FA;&#x672C;&#x7684;&#x6CE8;&#x610F;&#x4E8B;&#x9879;---&#x6709;&#x7528;&#x7684;&#x63D0;&#x793A;&#x521B;&#x5EFA;&#x951A;&#xFF08;&#x76F8;&#x5F53;&#x4E8E;&#x4E66;&#x7B7E;&#xFF09;" class="anchor-navigation-ex-anchor" href="#-&#x57FA;&#x672C;&#x7684;&#x6CE8;&#x610F;&#x4E8B;&#x9879;---&#x6709;&#x7528;&#x7684;&#x63D0;&#x793A;&#x521B;&#x5EFA;&#x951A;&#xFF08;&#x76F8;&#x5F53;&#x4E8E;&#x4E66;&#x7B7E;&#xFF09;"><i class="fa fa-link" aria-hidden="true"></i></a>\  &#x57FA;&#x672C;&#x7684;&#x6CE8;&#x610F;&#x4E8B;&#x9879; - &#x6709;&#x7528;&#x7684;&#x63D0;&#x793A;&#x521B;&#x5EFA;&#x951A;&#xFF08;&#x76F8;&#x5F53;&#x4E8E;&#x4E66;&#x7B7E;&#xFF09;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>Computer code<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>kbd</span><span class="token punctuation">&gt;</span></span>Keyboard input<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>kbd</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tt</span><span class="token punctuation">&gt;</span></span>Teletype text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tt</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>samp</span><span class="token punctuation">&gt;</span></span>Sample text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>samp</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>var</span><span class="token punctuation">&gt;</span></span>Computer variable<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>var</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
</code></pre>
</li>
<li><h3 id="&#x5730;&#x5740;&#x6807;&#x7B7E;--&#x6B64;&#x5143;&#x7D20;&#x901A;&#x5E38;&#x4EE5;&#x659C;&#x4F53;&#x663E;&#x793A;&#x3002;&#x5927;&#x591A;&#x6570;&#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x5728;&#x6B64;&#x5143;&#x7D20;&#x524D;&#x540E;&#x6DFB;&#x52A0;&#x6298;&#x884C;&#x3002;"><a name="&#x5730;&#x5740;&#x6807;&#x7B7E;--&#x6B64;&#x5143;&#x7D20;&#x901A;&#x5E38;&#x4EE5;&#x659C;&#x4F53;&#x663E;&#x793A;&#x3002;&#x5927;&#x591A;&#x6570;&#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x5728;&#x6B64;&#x5143;&#x7D20;&#x524D;&#x540E;&#x6DFB;&#x52A0;&#x6298;&#x884C;&#x3002;" class="anchor-navigation-ex-anchor" href="#&#x5730;&#x5740;&#x6807;&#x7B7E;--&#x6B64;&#x5143;&#x7D20;&#x901A;&#x5E38;&#x4EE5;&#x659C;&#x4F53;&#x663E;&#x793A;&#x3002;&#x5927;&#x591A;&#x6570;&#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x5728;&#x6B64;&#x5143;&#x7D20;&#x524D;&#x540E;&#x6DFB;&#x52A0;&#x6298;&#x884C;&#x3002;"><i class="fa fa-link" aria-hidden="true"></i></a>\ &#x5730;&#x5740;&#x6807;&#x7B7E;  &#x6B64;&#x5143;&#x7D20;&#x901A;&#x5E38;&#x4EE5;&#x659C;&#x4F53;&#x663E;&#x793A;&#x3002;&#x5927;&#x591A;&#x6570;&#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x5728;&#x6B64;&#x5143;&#x7D20;&#x524D;&#x540E;&#x6DFB;&#x52A0;&#x6298;&#x884C;&#x3002;</h3>
</li>
<li><h3 id="&#x6B64;&#x5143;&#x7D20;&#x901A;&#x5E38;&#x4EE5;&#x659C;&#x4F53;&#x663E;&#x793A;&#xFF0C;&#x5143;&#x7D20;&#x5B9A;&#x4E49;&#x8457;&#x4F5C;&#x7684;&#x6807;&#x9898;&#x3002;"><a name="&#x6B64;&#x5143;&#x7D20;&#x901A;&#x5E38;&#x4EE5;&#x659C;&#x4F53;&#x663E;&#x793A;&#xFF0C;&#x5143;&#x7D20;&#x5B9A;&#x4E49;&#x8457;&#x4F5C;&#x7684;&#x6807;&#x9898;&#x3002;" class="anchor-navigation-ex-anchor" href="#&#x6B64;&#x5143;&#x7D20;&#x901A;&#x5E38;&#x4EE5;&#x659C;&#x4F53;&#x663E;&#x793A;&#xFF0C;&#x5143;&#x7D20;&#x5B9A;&#x4E49;&#x8457;&#x4F5C;&#x7684;&#x6807;&#x9898;&#x3002;"><i class="fa fa-link" aria-hidden="true"></i></a>\ &#x6B64;&#x5143;&#x7D20;&#x901A;&#x5E38;&#x4EE5;&#x659C;&#x4F53;&#x663E;&#x793A;&#xFF0C;&#x5143;&#x7D20;&#x5B9A;&#x4E49;&#x8457;&#x4F5C;&#x7684;&#x6807;&#x9898;&#x3002;</h3>
</li>
<li><h3 id="&#x521B;&#x5EFA;&#x56FE;&#x50CF;&#x6620;&#x5C04;--&#x672C;&#x4F8B;&#x663E;&#x793A;&#x5982;&#x4F55;&#x521B;&#x5EFA;&#x5E26;&#x6709;&#x53EF;&#x4F9B;&#x70B9;&#x51FB;&#x533A;&#x57DF;&#x7684;&#x56FE;&#x50CF;&#x5730;&#x56FE;&#x3002;&#x5176;&#x4E2D;&#x7684;&#x6BCF;&#x4E2A;&#x533A;&#x57DF;&#x90FD;&#x662F;&#x4E00;&#x4E2A;&#x8D85;&#x7EA7;&#x94FE;&#x63A5;"><a name="&#x521B;&#x5EFA;&#x56FE;&#x50CF;&#x6620;&#x5C04;--&#x672C;&#x4F8B;&#x663E;&#x793A;&#x5982;&#x4F55;&#x521B;&#x5EFA;&#x5E26;&#x6709;&#x53EF;&#x4F9B;&#x70B9;&#x51FB;&#x533A;&#x57DF;&#x7684;&#x56FE;&#x50CF;&#x5730;&#x56FE;&#x3002;&#x5176;&#x4E2D;&#x7684;&#x6BCF;&#x4E2A;&#x533A;&#x57DF;&#x90FD;&#x662F;&#x4E00;&#x4E2A;&#x8D85;&#x7EA7;&#x94FE;&#x63A5;" class="anchor-navigation-ex-anchor" href="#&#x521B;&#x5EFA;&#x56FE;&#x50CF;&#x6620;&#x5C04;--&#x672C;&#x4F8B;&#x663E;&#x793A;&#x5982;&#x4F55;&#x521B;&#x5EFA;&#x5E26;&#x6709;&#x53EF;&#x4F9B;&#x70B9;&#x51FB;&#x533A;&#x57DF;&#x7684;&#x56FE;&#x50CF;&#x5730;&#x56FE;&#x3002;&#x5176;&#x4E2D;&#x7684;&#x6BCF;&#x4E2A;&#x533A;&#x57DF;&#x90FD;&#x662F;&#x4E00;&#x4E2A;&#x8D85;&#x7EA7;&#x94FE;&#x63A5;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x521B;&#x5EFA;&#x56FE;&#x50CF;&#x6620;&#x5C04;  &#x672C;&#x4F8B;&#x663E;&#x793A;&#x5982;&#x4F55;&#x521B;&#x5EFA;&#x5E26;&#x6709;&#x53EF;&#x4F9B;&#x70B9;&#x51FB;&#x533A;&#x57DF;&#x7684;&#x56FE;&#x50CF;&#x5730;&#x56FE;&#x3002;&#x5176;&#x4E2D;&#x7684;&#x6BCF;&#x4E2A;&#x533A;&#x57DF;&#x90FD;&#x662F;&#x4E00;&#x4E2A;&#x8D85;&#x7EA7;&#x94FE;&#x63A5;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>caption</span><span class="token punctuation">&gt;</span></span>&#x56FE;&#x8868;&#x6807;&#x9898;&#xFF0C;&#x7F6E;&#x4E8E;table&#x548C;tr&#x4E4B;&#x95F4;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>age<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>-------<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>&#x5782;&#x76F4;&#x6392;&#x5E03;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>nickname<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
&#x5408;&#x5E76;&#x5355;&#x5143;&#x683C;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
&#x589E;&#x52A0;&#x5355;&#x5143;&#x683C;&#x8FB9;&#x8DDD;&#x5927;&#x5C0F;

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
&#x589E;&#x52A0;&#x5355;&#x5143;&#x683C;&#x95F4;&#x8DDD;&#x5927;&#x5C0F;
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">cellpadding</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

&#x5217;&#x8868; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span> <span class="token attr-name">start</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>A/a/I/i<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> start&#x5F00;&#x59CB;&#x7D22;&#x5F15;&#x5927;&#x5C0F;,type&#x5206;&#x522B;&#x4EE3;&#x8868;&#x5927;&#x5199;&#xFF0C;&#x5C0F;&#x5199;&#xFF0C;&#x5927;&#x5199;&#x7F57;&#x9A6C;&#xFF0C;&#x5C0F;&#x5199;&#x7F57;&#x9A6C;&#x6570;&#x5B57;&#xFF0C;&#x4E0D;&#x52A0;&#x9ED8;&#x8BA4;&#x4E3A;&#x963F;&#x62C9;&#x4F2F;&#x6570;&#x5B57;
</code></pre>
</li>
<li><pre class="language-"><code class="lang-html">&#x9F20;&#x6807;&#x6587;&#x672C;&#x60AC;&#x6D6E;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>etcetera<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>etc.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>abbr</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>acronym</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>World Wide Web<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>WWW<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>acronym</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dfn</span><span class="token punctuation">&gt;</span></span>&#x4E5F;&#x6709;&#x7C7B;&#x4F3C;&#x6548;&#x679C;
</code></pre>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>bdo</span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>rtl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            &#x5012;&#x5E8F;&#x8F93;&#x51FA;&#x6587;&#x672C;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>bdo</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li><pre class="language-"><code class="lang-html">&#x5B9A;&#x4E49;&#x6570;&#x5B66;&#x53D8;&#x91CF;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>var</span><span class="token punctuation">&gt;</span></span>E = m c<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sup</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sup</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>var</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li><h3 id="html&#x8BED;&#x610F;&#x5143;&#x7D20;"><a name="html&#x8BED;&#x610F;&#x5143;&#x7D20;" class="anchor-navigation-ex-anchor" href="#html&#x8BED;&#x610F;&#x5143;&#x7D20;"><i class="fa fa-link" aria-hidden="true"></i></a>HTML&#x8BED;&#x610F;&#x5143;&#x7D20;</h3>
<pre class="language-"><code class="lang-html">HTML5 &#x8BED;&#x4E49;&#x5143;&#x7D20;
header    &#x5B9A;&#x4E49;&#x6587;&#x6863;&#x6216;&#x8282;&#x7684;&#x9875;&#x7709;
nav    &#x5B9A;&#x4E49;&#x5BFC;&#x822A;&#x94FE;&#x63A5;&#x7684;&#x5BB9;&#x5668;
section    &#x5B9A;&#x4E49;&#x6587;&#x6863;&#x4E2D;&#x7684;&#x8282;
article    &#x5B9A;&#x4E49;&#x72EC;&#x7ACB;&#x7684;&#x81EA;&#x5305;&#x542B;&#x6587;&#x7AE0;
aside    &#x5B9A;&#x4E49;&#x5185;&#x5BB9;&#x4E4B;&#x5916;&#x7684;&#x5185;&#x5BB9;&#xFF08;&#x6BD4;&#x5982;&#x4FA7;&#x680F;&#xFF09;
footer    &#x5B9A;&#x4E49;&#x6587;&#x6863;&#x6216;&#x8282;&#x7684;&#x9875;&#x811A;
details    &#x5B9A;&#x4E49;&#x989D;&#x5916;&#x7684;&#x7EC6;&#x8282;
summary    &#x5B9A;&#x4E49; details &#x5143;&#x7D20;&#x7684;&#x6807;&#x9898;
</code></pre>
</li>
<li><h3 id="html&#x6846;&#x67B6;"><a name="html&#x6846;&#x67B6;" class="anchor-navigation-ex-anchor" href="#html&#x6846;&#x67B6;"><i class="fa fa-link" aria-hidden="true"></i></a>HTML&#x6846;&#x67B6;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token comment">&lt;!-- &#x5782;&#x76F4;&#x6846;&#x67B6; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>frameset</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>25%,50%,25%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">noresize</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>noresize<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>http://www.w3school.com.cn/example/html/frame_a.html<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>http://www.w3school.com.cn/example/html/frame_b.html<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>http://www.w3school.com.cn/example/html/frame_c.html<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>frameset</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &#x6C34;&#x5E73;&#x6846;&#x67B6; --&gt;</span>
rows=&quot;15%,20%,15%&quot; 
&#x65E0;&#x6CD5;&#x6539;&#x53D8;&#x7A97;&#x53E3;&#x5927;&#x5C0F;
noresize=&quot;noresize&quot;

&#x91CD;&#x8981;&#x63D0;&#x793A;&#xFF1A;&#x4E0D;&#x80FD;&#x5C06; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span> &#x6807;&#x7B7E;&#x4E0E; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>frameset</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>frameset</span><span class="token punctuation">&gt;</span></span> &#x6807;&#x7B7E;&#x540C;&#x65F6;&#x4F7F;&#x7528;&#xFF01;&#x4E0D;&#x8FC7;&#xFF0C;&#x5047;&#x5982;&#x4F60;&#x6DFB;&#x52A0;&#x5305;&#x542B;&#x4E00;&#x6BB5;&#x6587;&#x672C;&#x7684; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>noframes</span><span class="token punctuation">&gt;</span></span> &#x6807;&#x7B7E;&#xFF0C;&#x5C31;&#x5FC5;&#x987B;&#x5C06;&#x8FD9;&#x6BB5;&#x6587;&#x5B57;&#x5D4C;&#x5957;&#x4E8E; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span> &#x6807;&#x7B7E;&#x5185;&#x3002;&#xFF08;&#x5728;&#x4E0B;&#x9762;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B9E;&#x4F8B;&#x4E2D;&#xFF0C;&#x53EF;&#x4EE5;&#x67E5;&#x770B;&#x5B83;&#x662F;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x7684;&#x3002;&#xFF09;
</code></pre>
</li>
<li><h3 id="html&#x8FD0;&#x884C;js&#x811A;&#x672C;"><a name="html&#x8FD0;&#x884C;js&#x811A;&#x672C;" class="anchor-navigation-ex-anchor" href="#html&#x8FD0;&#x884C;js&#x811A;&#x672C;"><i class="fa fa-link" aria-hidden="true"></i></a>HTML&#x8FD0;&#x884C;js&#x811A;&#x672C;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
document.write(&quot;Hello World!&quot;)
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>noscript</span><span class="token punctuation">&gt;</span></span>&#x5F53;&#x6D4F;&#x89C8;&#x5668;&#x4E0D;&#x652F;&#x6301;js&#x811A;&#x672C;&#x6216;&#x8005;&#x7981;&#x7528;&#x65F6;&#x4F1A;&#x663E;&#x793A;&#x6539;&#x884C;&#x6587;&#x672C;&#x4FE1;&#x606F;&#xFF01;&#xFF01;&#xFF01;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>noscript</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li><h3 id="&#x5C06;&#x5728;&#x65B0;&#x7A97;&#x53E3;&#x4E2D;&#x52A0;&#x8F7D;"><a name="&#x5C06;&#x5728;&#x65B0;&#x7A97;&#x53E3;&#x4E2D;&#x52A0;&#x8F7D;" class="anchor-navigation-ex-anchor" href="#&#x5C06;&#x5728;&#x65B0;&#x7A97;&#x53E3;&#x4E2D;&#x52A0;&#x8F7D;"><i class="fa fa-link" aria-hidden="true"></i></a>\&#x5C06;&#x5728;&#x65B0;&#x7A97;&#x53E3;&#x4E2D;&#x52A0;&#x8F7D;</h3>
</li>
<li><h3 id="&#x672C;&#x6587;&#x6863;&#x7684;&#x5C5E;&#x6027;&#x6807;&#x8BC6;&#x4E86;&#x521B;&#x4F5C;&#x8005;&#x548C;&#x7F16;&#x8F91;&#x8F6F;&#x4EF6;&#x672C;&#x6587;&#x6863;&#x7684;-meta-&#x5C5E;&#x6027;&#x63CF;&#x8FF0;&#x4E86;&#x8BE5;&#x6587;&#x6863;&#x548C;&#x5B83;&#x7684;&#x5173;&#x952E;&#x8BCD;"><a name="&#x672C;&#x6587;&#x6863;&#x7684;&#x5C5E;&#x6027;&#x6807;&#x8BC6;&#x4E86;&#x521B;&#x4F5C;&#x8005;&#x548C;&#x7F16;&#x8F91;&#x8F6F;&#x4EF6;&#x672C;&#x6587;&#x6863;&#x7684;-meta-&#x5C5E;&#x6027;&#x63CF;&#x8FF0;&#x4E86;&#x8BE5;&#x6587;&#x6863;&#x548C;&#x5B83;&#x7684;&#x5173;&#x952E;&#x8BCD;" class="anchor-navigation-ex-anchor" href="#&#x672C;&#x6587;&#x6863;&#x7684;&#x5C5E;&#x6027;&#x6807;&#x8BC6;&#x4E86;&#x521B;&#x4F5C;&#x8005;&#x548C;&#x7F16;&#x8F91;&#x8F6F;&#x4EF6;&#x672C;&#x6587;&#x6863;&#x7684;-meta-&#x5C5E;&#x6027;&#x63CF;&#x8FF0;&#x4E86;&#x8BE5;&#x6587;&#x6863;&#x548C;&#x5B83;&#x7684;&#x5173;&#x952E;&#x8BCD;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x672C;&#x6587;&#x6863;&#x7684;\&#x5C5E;&#x6027;&#x6807;&#x8BC6;&#x4E86;&#x521B;&#x4F5C;&#x8005;&#x548C;&#x7F16;&#x8F91;&#x8F6F;&#x4EF6;,&#x672C;&#x6587;&#x6863;&#x7684; meta &#x5C5E;&#x6027;&#x63CF;&#x8FF0;&#x4E86;&#x8BE5;&#x6587;&#x6863;&#x548C;&#x5B83;&#x7684;&#x5173;&#x952E;&#x8BCD;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Content-Type<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/html; charset=gb2312<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>suofeiya<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>http://suofeiya.pro<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li><h3 id="html&#x5B9E;&#x4F53;"><a name="html&#x5B9E;&#x4F53;" class="anchor-navigation-ex-anchor" href="#html&#x5B9E;&#x4F53;"><i class="fa fa-link" aria-hidden="true"></i></a>HTML&#x5B9E;&#x4F53;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token entity" title="&lt;">&amp;lt;</span> &#x6216; <span class="token entity" title="&lt;">&amp;#60;</span> <span class="token entity" title="&#xA0;">&amp;nbsp;</span>
HTML &#x5B9E;&#x4F53;&#x7B26;&#x53F7;&#x53C2;&#x8003;&#x624B;&#x518C;:
http://www.w3school.com.cn/tags/html_ref_entities.html
</code></pre>
</li>
</ul>
<ul>
<li><h3 id="&#x5C5E;&#x6027;&#x5217;&#x8868;&#x5982;&#x4E0B;"><a name="&#x5C5E;&#x6027;&#x5217;&#x8868;&#x5982;&#x4E0B;" class="anchor-navigation-ex-anchor" href="#&#x5C5E;&#x6027;&#x5217;&#x8868;&#x5982;&#x4E0B;"><i class="fa fa-link" aria-hidden="true"></i></a>\&#x5C5E;&#x6027;&#x5217;&#x8868;&#x5982;&#x4E0B;</h3>
</li>
<li><pre class="language-"><code class="lang-html">&#x4E0B;&#x9762;&#x662F; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span> &#x5C5E;&#x6027;&#x7684;&#x5217;&#x8868;&#xFF1A;

&#x5C5E;&#x6027;    &#x63CF;&#x8FF0;
accept-charset    &#x89C4;&#x5B9A;&#x5728;&#x88AB;&#x63D0;&#x4EA4;&#x8868;&#x5355;&#x4E2D;&#x4F7F;&#x7528;&#x7684;&#x5B57;&#x7B26;&#x96C6;&#xFF08;&#x9ED8;&#x8BA4;&#xFF1A;&#x9875;&#x9762;&#x5B57;&#x7B26;&#x96C6;&#xFF09;&#x3002;
action    &#x89C4;&#x5B9A;&#x5411;&#x4F55;&#x5904;&#x63D0;&#x4EA4;&#x8868;&#x5355;&#x7684;&#x5730;&#x5740;&#xFF08;URL&#xFF09;&#xFF08;&#x63D0;&#x4EA4;&#x9875;&#x9762;&#xFF09;&#x3002;
autocomplete    &#x89C4;&#x5B9A;&#x6D4F;&#x89C8;&#x5668;&#x5E94;&#x8BE5;&#x81EA;&#x52A8;&#x5B8C;&#x6210;&#x8868;&#x5355;&#xFF08;&#x9ED8;&#x8BA4;&#xFF1A;&#x5F00;&#x542F;&#xFF09;&#x3002;
enctype    &#x89C4;&#x5B9A;&#x88AB;&#x63D0;&#x4EA4;&#x6570;&#x636E;&#x7684;&#x7F16;&#x7801;&#xFF08;&#x9ED8;&#x8BA4;&#xFF1A;url-encoded&#xFF09;&#x3002;
method    &#x89C4;&#x5B9A;&#x5728;&#x63D0;&#x4EA4;&#x8868;&#x5355;&#x65F6;&#x6240;&#x7528;&#x7684; HTTP &#x65B9;&#x6CD5;&#xFF08;&#x9ED8;&#x8BA4;&#xFF1A;GET&#xFF09;&#x3002;
name    &#x89C4;&#x5B9A;&#x8BC6;&#x522B;&#x8868;&#x5355;&#x7684;&#x540D;&#x79F0;&#xFF08;&#x5BF9;&#x4E8E; DOM &#x4F7F;&#x7528;&#xFF1A;document.forms.name&#xFF09;&#x3002;
novalidate    &#x89C4;&#x5B9A;&#x6D4F;&#x89C8;&#x5668;&#x4E0D;&#x9A8C;&#x8BC1;&#x8868;&#x5355;&#x3002;
target    &#x89C4;&#x5B9A; action &#x5C5E;&#x6027;&#x4E2D;&#x5730;&#x5740;&#x7684;&#x76EE;&#x6807;&#xFF08;&#x9ED8;&#x8BA4;&#xFF1A;_self&#xFF09;&#x3002;
</code></pre>
</li>
<li><h3 id="&#x4E0B;&#x62C9;&#x83DC;&#x5355;"><a name="&#x4E0B;&#x62C9;&#x83DC;&#x5355;" class="anchor-navigation-ex-anchor" href="#&#x4E0B;&#x62C9;&#x83DC;&#x5355;"><i class="fa fa-link" aria-hidden="true"></i></a>\&#x4E0B;&#x62C9;&#x83DC;&#x5355;</h3>
</li>
<li><pre class="language-"><code class="lang-html"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>cars<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>volvo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Volvo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>saab<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Saab<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fiat<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Fiat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
                 <span class="token comment">&lt;!-- selected&#x521D;&#x59CB;&#x5316;&#x9ED8;&#x8BA4;&#x9009;&#x9879; --&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>audi<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selected</span><span class="token punctuation">&gt;</span></span>Audi<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- HTML5&#x4E2D;&#x7684;&#x65B0;&#x5F0F;&#x4E0B;&#x62C9;&#x83DC;&#x5355; --&gt;</span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>http://www.w3school.com.cn/demo/demo_form.asp<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>browsers<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>browser<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>browsers<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Internet Explorer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Firefox<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Chrome<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Opera<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Safari<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>datalist</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li><h3 id="&#x5355;&#x9009;&#x6846;"><a name="&#x5355;&#x9009;&#x6846;" class="anchor-navigation-ex-anchor" href="#&#x5355;&#x9009;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x5355;&#x9009;&#x6846;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fieldset</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>legend</span><span class="token punctuation">&gt;</span></span>&#x5355;&#x9009;&#x6846;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>legend</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>sex<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>male<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>Male
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>sex<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>female<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Female
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>fieldset</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li></li>
<li><h3 id="&#x4F7F;&#x7528;&#x6587;&#x672C;&#x57DF;"><a name="&#x4F7F;&#x7528;&#x6587;&#x672C;&#x57DF;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;&#x6587;&#x672C;&#x57DF;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;&#x6587;&#x672C;&#x57DF;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>30<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
&#x6587;&#x672C;&#x57DF;&#x4E2D;&#x7684;&#x521D;&#x59CB;&#x5316;&#x5185;&#x5BB9;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li><h3 id="button&#x6309;&#x94AE;&#x4E8B;&#x4EF6;"><a name="button&#x6309;&#x94AE;&#x4E8B;&#x4EF6;" class="anchor-navigation-ex-anchor" href="#button&#x6309;&#x94AE;&#x4E8B;&#x4EF6;"><i class="fa fa-link" aria-hidden="true"></i></a>button&#x6309;&#x94AE;&#x4E8B;&#x4EF6;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert(&apos;Hello World!&apos;)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x60A8;&#x89E6;&#x53D1;&#x4E86;&#x6309;&#x94AE;&#x4E8B;&#x4EF6;&#xFF01;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li><h3 id="input&#x8F93;&#x5165;&#x9650;&#x5236;"><a name="input&#x8F93;&#x5165;&#x9650;&#x5236;" class="anchor-navigation-ex-anchor" href="#input&#x8F93;&#x5165;&#x9650;&#x5236;"><i class="fa fa-link" aria-hidden="true"></i></a>input&#x8F93;&#x5165;&#x9650;&#x5236;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>
  Quantity (between 1 and 5):
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>number<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>quantity<span class="token punctuation">&quot;</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
&#x5E38;&#x7528;&#x7684;&#x8F93;&#x5165;&#x9650;&#x5236;&#xFF08;&#x5176;&#x4E2D;&#x4E00;&#x4E9B;&#x662F; HTML5 &#x4E2D;&#x65B0;&#x589E;&#x7684;&#xFF09;&#xFF1A;
&#x5C5E;&#x6027;    &#x63CF;&#x8FF0;
disabled    &#x89C4;&#x5B9A;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x5E94;&#x8BE5;&#x88AB;&#x7981;&#x7528;&#x3002;
max    &#x89C4;&#x5B9A;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x7684;&#x6700;&#x5927;&#x503C;&#x3002;
maxlength    &#x89C4;&#x5B9A;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x7684;&#x6700;&#x5927;&#x5B57;&#x7B26;&#x6570;&#x3002;
min    &#x89C4;&#x5B9A;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x7684;&#x6700;&#x5C0F;&#x503C;&#x3002;
pattern    &#x89C4;&#x5B9A;&#x901A;&#x8FC7;&#x5176;&#x68C0;&#x67E5;&#x8F93;&#x5165;&#x503C;&#x7684;&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;&#x3002;
readonly    &#x89C4;&#x5B9A;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x4E3A;&#x53EA;&#x8BFB;&#xFF08;&#x65E0;&#x6CD5;&#x4FEE;&#x6539;&#xFF09;&#x3002;
required    &#x89C4;&#x5B9A;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x662F;&#x5FC5;&#x9700;&#x7684;&#xFF08;&#x5FC5;&#x9700;&#x586B;&#x5199;&#xFF09;&#x3002;
size    &#x89C4;&#x5B9A;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x7684;&#x5BBD;&#x5EA6;&#xFF08;&#x4EE5;&#x5B57;&#x7B26;&#x8BA1;&#xFF09;&#x3002;
step    &#x89C4;&#x5B9A;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x7684;&#x5408;&#x6CD5;&#x6570;&#x5B57;&#x95F4;&#x9694;&#x3002;
value    &#x89C4;&#x5B9A;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x7684;&#x9ED8;&#x8BA4;&#x503C;&#x3002;
autofocus &#x5C5E;&#x6027;&#x662F;&#x5E03;&#x5C14;&#x5C5E;&#x6027;&#x3002;&#x81EA;&#x52A8;&#x83B7;&#x5F97;&#x7126;&#x70B9;&#x3002;
multiple &#x5219;&#x89C4;&#x5B9A;&#x5141;&#x8BB8;&#x7528;&#x6237;&#x5728; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><span class="token punctuation">&gt;</span></span> &#x5143;&#x7D20;&#x4E2D;&#x8F93;&#x5165;&#x4E00;&#x4E2A;&#x4EE5;&#x4E0A;&#x7684;&#x503C;
pattern pattern &#x5C5E;&#x6027;&#x89C4;&#x5B9A;&#x7528;&#x4E8E;&#x68C0;&#x67E5; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><span class="token punctuation">&gt;</span></span> &#x5143;&#x7D20;&#x503C;&#x7684;&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;&#x3002;
placeholder=&quot;First name&quot; &#x7528;&#x4E8E;&#x9884;&#x671F;&#x63D0;&#x793A;
required &#x5FC5;&#x586B;&#x5B57;&#x6BB5;    
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action_page.php<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> &#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x57FA;&#x4E8E;&#x7528;&#x6237;&#x4E4B;&#x524D;&#x7684;&#x8F93;&#x5165;&#x503C;&#x81EA;&#x52A8;&#x586B;&#x5199;&#x503C;&#x3002;
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action_page.php<span class="token punctuation">&quot;</span></span> <span class="token attr-name">novalidate</span><span class="token punctuation">&gt;</span></span>novalidate &#x5C5E;&#x6027;&#x5C5E;&#x4E8E; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span> &#x5C5E;&#x6027;&#x3002;&#x5982;&#x679C;&#x8BBE;&#x7F6E;&#xFF0C;&#x5219; novalidate &#x89C4;&#x5B9A;&#x5728;&#x63D0;&#x4EA4;&#x8868;&#x5355;&#x65F6;&#x4E0D;&#x5BF9;&#x8868;&#x5355;&#x6570;&#x636E;&#x8FDB;&#x884C;&#x9A8C;&#x8BC1;&#x3002;
<span class="token comment">&lt;!--&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x4F4D;&#x4E8E; HTML &#x8868;&#x5355;&#x4E4B;&#x5916;&#xFF08;&#x4F46;&#x4ECD;&#x5C5E;&#x8868;&#x5355;&#xFF09;&#xFF1A;--&gt;</span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action_page.php<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>form1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
   First name: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fname<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>

 Last name: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>lname<span class="token punctuation">&quot;</span></span> <span class="token attr-name">form</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>form1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>
  Birthday:
    &#x8BF7;&#x8F93;&#x5165; 2000-01-01 &#x4E4B;&#x540E;&#x7684;&#x65E5;&#x671F;&#xFF1A;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>bday<span class="token punctuation">&quot;</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>2000-01-02<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action_page.php<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  Select your favorite color:
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>color<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>favcolor<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>#ff0000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &#x6ED1;&#x5757;&#x7C7B;&#x578B;&#x8F93;&#x5165; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/demo/demo_form.asp<span class="token punctuation">&quot;</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>get<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  Points:
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>range<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>points<span class="token punctuation">&quot;</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &#x5176;&#x4ED6; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> &#x5141;&#x8BB8;&#x7528;&#x6237;&#x9009;&#x62E9;&#x6708;&#x4EFD;&#x548C;&#x5E74;&#x4EFD;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>week<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> &#x5141;&#x8BB8;&#x7528;&#x6237;&#x9009;&#x62E9;&#x5468;&#x548C;&#x5E74;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>time<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> &#x5141;&#x8BB8;&#x7528;&#x6237;&#x9009;&#x62E9;&#x65F6;&#x95F4;&#xFF08;&#x65E0;&#x65F6;&#x533A;&#xFF09;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>datetime<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> &#x5141;&#x8BB8;&#x7528;&#x6237;&#x9009;&#x62E9;&#x65E5;&#x671F;&#x548C;&#x65F6;&#x95F4;&#xFF08;&#x6709;&#x65F6;&#x533A;&#xFF09;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>datetime-local<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> &#x5141;&#x8BB8;&#x7528;&#x6237;&#x9009;&#x62E9;&#x65E5;&#x671F;&#x548C;&#x65F6;&#x95F4;&#xFF08;&#x65E0;&#x65F6;&#x533A;&#xFF09;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> &#x7528;&#x4E8E;&#x5E94;&#x8BE5;&#x5305;&#x542B;&#x7535;&#x5B50;&#x90AE;&#x4EF6;&#x5730;&#x5740;&#x7684;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> &#x7528;&#x4E8E;&#x641C;&#x7D22;&#x5B57;&#x6BB5;&#xFF08;&#x641C;&#x7D22;&#x5B57;&#x6BB5;&#x7684;&#x8868;&#x73B0;&#x7C7B;&#x4F3C;&#x5E38;&#x89C4;&#x6587;&#x672C;&#x5B57;&#x6BB5;&#xFF09;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> &#x7528;&#x4E8E;&#x5E94;&#x8BE5;&#x5305;&#x542B;&#x7535;&#x8BDD;&#x53F7;&#x7801;&#x7684;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>url<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> &#x7528;&#x4E8E;&#x5E94;&#x8BE5;&#x5305;&#x542B; URL &#x5730;&#x5740;&#x7684;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>image<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/i/eg_submit.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>128<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>128<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>&#x628A;&#x56FE;&#x50CF;&#x5B9A;&#x4E49;&#x4E3A;&#x63D0;&#x4EA4;&#x6309;&#x94AE;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">&gt;</span></span>&#x7528;&#x4E8E;&#x63D0;&#x4EA4;&#x6587;&#x4EF6;&#xFF0C;muiliple&#x9009;&#x62E9;&#x4E00;&#x4E2A;&#x4EE5;&#x4E0A;&#x7684;&#x6587;&#x4EF6;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fname<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> &#x7528;&#x4E8E;&#x9884;&#x671F;&#x63D0;&#x793A;
</code></pre>
</li>
</ul>
<h2 id="bootstrap-&#x54CD;&#x5E94;&#x5F0F;&#x6846;&#x67B6;"><a name="bootstrap-&#x54CD;&#x5E94;&#x5F0F;&#x6846;&#x67B6;" class="anchor-navigation-ex-anchor" href="#bootstrap-&#x54CD;&#x5E94;&#x5F0F;&#x6846;&#x67B6;"><i class="fa fa-link" aria-hidden="true"></i></a>1.1. Bootstrap &#x54CD;&#x5E94;&#x5F0F;&#x6846;&#x67B6;</h2>
<h2 id="xhtml"><a name="xhtml" class="anchor-navigation-ex-anchor" href="#xhtml"><i class="fa fa-link" aria-hidden="true"></i></a>1.2. XHTML</h2>
<ul>
<li><h3 id="xhtml-&#x6307;&#x7684;&#x662F;&#x53EF;&#x6269;&#x5C55;&#x8D85;&#x6587;&#x672C;&#x6807;&#x8BB0;&#x8BED;&#x8A00;&#xFF0C;xhtml-&#x4E0E;-html-401-&#x51E0;&#x4E4E;&#x662F;&#x76F8;&#x540C;&#x7684;"><a name="xhtml-&#x6307;&#x7684;&#x662F;&#x53EF;&#x6269;&#x5C55;&#x8D85;&#x6587;&#x672C;&#x6807;&#x8BB0;&#x8BED;&#x8A00;&#xFF0C;xhtml-&#x4E0E;-html-401-&#x51E0;&#x4E4E;&#x662F;&#x76F8;&#x540C;&#x7684;" class="anchor-navigation-ex-anchor" href="#xhtml-&#x6307;&#x7684;&#x662F;&#x53EF;&#x6269;&#x5C55;&#x8D85;&#x6587;&#x672C;&#x6807;&#x8BB0;&#x8BED;&#x8A00;&#xFF0C;xhtml-&#x4E0E;-html-401-&#x51E0;&#x4E4E;&#x662F;&#x76F8;&#x540C;&#x7684;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2.1. XHTML &#x6307;&#x7684;&#x662F;&#x53EF;&#x6269;&#x5C55;&#x8D85;&#x6587;&#x672C;&#x6807;&#x8BB0;&#x8BED;&#x8A00;&#xFF0C;XHTML &#x4E0E; HTML 4.01 &#x51E0;&#x4E4E;&#x662F;&#x76F8;&#x540C;&#x7684;</h3>
</li>
<li><h3 id="&#x5982;&#x4F55;&#x4ECE;-html-&#x8F6C;&#x6362;&#x5230;-xhtml"><a name="&#x5982;&#x4F55;&#x4ECE;-html-&#x8F6C;&#x6362;&#x5230;-xhtml" class="anchor-navigation-ex-anchor" href="#&#x5982;&#x4F55;&#x4ECE;-html-&#x8F6C;&#x6362;&#x5230;-xhtml"><i class="fa fa-link" aria-hidden="true"></i></a>1.2.2. &#x5982;&#x4F55;&#x4ECE; HTML &#x8F6C;&#x6362;&#x5230; XHTML</h3>
</li>
<li><pre class="language-"><code>1. &#x5411;&#x6BCF;&#x5F20;&#x9875;&#x9762;&#x7684;&#x7B2C;&#x4E00;&#x884C;&#x6DFB;&#x52A0; XHTML <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>!DOCTYPE</span><span class="token punctuation">&gt;</span></span>
2. &#x5411;&#x6BCF;&#x5F20;&#x9875;&#x9762;&#x7684; html &#x5143;&#x7D20;&#x6DFB;&#x52A0; xmlns &#x5C5E;&#x6027;
3. &#x628A;&#x6240;&#x6709;&#x5143;&#x7D20;&#x540D;&#x6539;&#x4E3A;&#x5C0F;&#x5199;
4. &#x5173;&#x95ED;&#x6240;&#x6709;&#x7A7A;&#x5143;&#x7D20;
5. &#x628A;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x540D;&#x6539;&#x4E3A;&#x5C0F;&#x5199;
6. &#x4E3A;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x503C;&#x52A0;&#x5F15;&#x53F7;
</code></pre></li>
<li><h3 id="&#x7528;--&#x7EC4;&#x5408;&#x8868;&#x5355;&#x6570;&#x636E;"><a name="&#x7528;--&#x7EC4;&#x5408;&#x8868;&#x5355;&#x6570;&#x636E;" class="anchor-navigation-ex-anchor" href="#&#x7528;--&#x7EC4;&#x5408;&#x8868;&#x5355;&#x6570;&#x636E;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2.3. &#x7528; \ &#x7EC4;&#x5408;&#x8868;&#x5355;&#x6570;&#x636E;</h3>
</li>
</ul>
<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action_page.php<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fieldset</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>legend</span><span class="token punctuation">&gt;</span></span>Personal information:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>legend</span><span class="token punctuation">&gt;</span></span>
First name:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>firstname<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Mickey<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
Last name:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>lastname<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Mouse<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>fieldset</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<ul>
<li><h2 id="html5"><a name="html5" class="anchor-navigation-ex-anchor" href="#html5"><i class="fa fa-link" aria-hidden="true"></i></a>1.3. HTML5</h2>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>320<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>240<span class="token punctuation">&quot;</span></span> <span class="token attr-name">controls</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>controls<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/i/movie.ogg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>video/ogg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/i/movie.mp4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>video/mp4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
Your browser does not support the video tag.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li><h3 id="&#x65B0;&#x7684;&#x5C5E;&#x6027;&#x8BED;&#x6CD5;"><a name="&#x65B0;&#x7684;&#x5C5E;&#x6027;&#x8BED;&#x6CD5;" class="anchor-navigation-ex-anchor" href="#&#x65B0;&#x7684;&#x5C5E;&#x6027;&#x8BED;&#x6CD5;"><i class="fa fa-link" aria-hidden="true"></i></a>1.3.1. &#x65B0;&#x7684;&#x5C5E;&#x6027;&#x8BED;&#x6CD5;</h3>
</li>
<li><pre class="language-"><code>HTML5 &#x6807;&#x51C6;&#x5141;&#x8BB8; 4 &#x4E2D;&#x4E0D;&#x540C;&#x7684;&#x5C5E;&#x6027;&#x8BED;&#x6CD5;&#x3002;

&#x672C;&#x4F8B;&#x6F14;&#x793A;&#x5728; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><span class="token punctuation">&gt;</span></span> &#x6807;&#x7B7E;&#x4E2D;&#x4F7F;&#x7528;&#x7684;&#x4E0D;&#x540C;&#x8BED;&#x6CD5;&#xFF1A;

&#x7C7B;&#x578B;    &#x793A;&#x4F8B;
Empty    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>John Doe<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>
Unquoted    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span>John</span> <span class="token attr-name">Doe</span><span class="token punctuation">&gt;</span></span>
Double-quoted    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>John Doe<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
Single-quoted    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&apos;</span>John Doe<span class="token punctuation">&apos;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></li>
<li><h3 id="&#x65B0;&#x7279;&#x6027;"><a name="&#x65B0;&#x7279;&#x6027;" class="anchor-navigation-ex-anchor" href="#&#x65B0;&#x7279;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.3.2. &#x65B0;&#x7279;&#x6027;</h3>
</li>
<li><pre class="language-"><code class="lang-html">HTML5 &#x7684;&#x4E00;&#x4E9B;&#x6700;&#x6709;&#x8DA3;&#x7684;&#x65B0;&#x7279;&#x6027;&#xFF1A;

&#x65B0;&#x7684;&#x8BED;&#x4E49;&#x5143;&#x7D20;&#xFF0C;&#x6BD4;&#x5982; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">&gt;</span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>, and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>&#x3002;
&#x65B0;&#x7684;&#x8868;&#x5355;&#x63A7;&#x4EF6;&#xFF0C;&#x6BD4;&#x5982;&#x6570;&#x5B57;&#x3001;&#x65E5;&#x671F;&#x3001;&#x65F6;&#x95F4;&#x3001;&#x65E5;&#x5386;&#x548C;&#x6ED1;&#x5757;&#x3002;
&#x5F3A;&#x5927;&#x7684;&#x56FE;&#x50CF;&#x652F;&#x6301;&#xFF08;&#x501F;&#x7531; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>canvas</span><span class="token punctuation">&gt;</span></span> &#x548C; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span><span class="token punctuation">&gt;</span></span>&#xFF09;
&#x5F3A;&#x5927;&#x7684;&#x591A;&#x5A92;&#x4F53;&#x652F;&#x6301;&#xFF08;&#x501F;&#x7531; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span><span class="token punctuation">&gt;</span></span> &#x548C; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>audio</span><span class="token punctuation">&gt;</span></span>&#xFF09;
&#x5F3A;&#x5927;&#x7684;&#x65B0; API&#xFF0C;&#x6BD4;&#x5982;&#x7528;&#x672C;&#x5730;&#x5B58;&#x50A8;&#x53D6;&#x4EE3; cookie&#x3002;
</code></pre>
</li>
<li><h3 id="html5&#x88AB;&#x5220;&#x9664;&#x5143;&#x7D20;"><a name="html5&#x88AB;&#x5220;&#x9664;&#x5143;&#x7D20;" class="anchor-navigation-ex-anchor" href="#html5&#x88AB;&#x5220;&#x9664;&#x5143;&#x7D20;"><i class="fa fa-link" aria-hidden="true"></i></a>1.3.3. HTML5&#x88AB;&#x5220;&#x9664;&#x5143;&#x7D20;</h3>
</li>
<li><pre class="language-"><code class="lang-html">&#x4EE5;&#x4E0B; HTML 4.01 &#x5143;&#x7D20;&#x5DF2;&#x4ECE; HTML5 &#x4E2D;&#x5220;&#x9664;&#xFF1A;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>acronym</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>applet</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>basefont</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>big</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>center</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dir</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>font</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>frame</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>frameset</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>noframes</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strike</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tt</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li><h3 id="&#x65B0;&#x7684;&#x8BED;&#x4E49;&#x7ED3;&#x6784;&#x5143;&#x7D20;"><a name="&#x65B0;&#x7684;&#x8BED;&#x4E49;&#x7ED3;&#x6784;&#x5143;&#x7D20;" class="anchor-navigation-ex-anchor" href="#&#x65B0;&#x7684;&#x8BED;&#x4E49;&#x7ED3;&#x6784;&#x5143;&#x7D20;"><i class="fa fa-link" aria-hidden="true"></i></a>1.3.4. &#x65B0;&#x7684;&#x8BED;&#x4E49;&#x7ED3;&#x6784;&#x5143;&#x7D20;</h3>
</li>
<li><p><a href="http://www.w3school.com.cn/i/ct_sem_elements.png" data-lightbox="f87563bb-1ec5-4328-90bd-d60eb1a2fbf5" data-title="HTML5 &#xE8;&#xAF;&#xAD;&#xE4;&#xB9;&#x2030;&#xE5;&#x2026;&#x192;&#xE7;&#xB4; " target="_blank"><img src="http://www.w3school.com.cn/i/ct_sem_elements.png" alt="HTML5 &#xE8;&#xAF;&#xAD;&#xE4;&#xB9;&#x2030;&#xE5;&#x2026;&#x192;&#xE7;&#xB4; "></a></p>
</li>
<li><pre class="language-"><code class="lang-html">HTML5 &#x63D0;&#x4F9B;&#x7684;&#x65B0;&#x5143;&#x7D20;&#x53EF;&#x4EE5;&#x6784;&#x5EFA;&#x66F4;&#x597D;&#x7684;&#x6587;&#x6863;&#x7ED3;&#x6784;&#xFF1A;

&#x6807;&#x7B7E;    &#x63CF;&#x8FF0;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x6587;&#x6863;&#x5185;&#x7684;&#x6587;&#x7AE0;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>aside</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x9875;&#x9762;&#x5185;&#x5BB9;&#x4E4B;&#x5916;&#x7684;&#x5185;&#x5BB9;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>bdi</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x4E0E;&#x5176;&#x4ED6;&#x6587;&#x672C;&#x4E0D;&#x540C;&#x7684;&#x6587;&#x672C;&#x65B9;&#x5411;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>details</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x7528;&#x6237;&#x53EF;&#x67E5;&#x770B;&#x6216;&#x9690;&#x85CF;&#x7684;&#x989D;&#x5916;&#x7EC6;&#x8282;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dialog</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x5BF9;&#x8BDD;&#x6846;&#x6216;&#x7A97;&#x53E3;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figcaption</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figure</span><span class="token punctuation">&gt;</span></span> &#x5143;&#x7D20;&#x7684;&#x6807;&#x9898;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figure</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x81EA;&#x5305;&#x542B;&#x5185;&#x5BB9;&#xFF0C;&#x6BD4;&#x5982;&#x56FE;&#x793A;&#x3001;&#x56FE;&#x8868;&#x3001;&#x7167;&#x7247;&#x3001;&#x4EE3;&#x7801;&#x6E05;&#x5355;&#x7B49;&#x7B49;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x6587;&#x6863;&#x6216;&#x8282;&#x7684;&#x9875;&#x811A;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x6587;&#x6863;&#x6216;&#x8282;&#x7684;&#x9875;&#x7709;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>main</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x6587;&#x6863;&#x7684;&#x4E3B;&#x5185;&#x5BB9;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mark</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x91CD;&#x8981;&#x6216;&#x5F3A;&#x8C03;&#x7684;&#x5185;&#x5BB9;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>menuitem</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x7528;&#x6237;&#x80FD;&#x591F;&#x4ECE;&#x5F39;&#x51FA;&#x83DC;&#x5355;&#x8C03;&#x7528;&#x7684;&#x547D;&#x4EE4;/&#x83DC;&#x5355;&#x9879;&#x76EE;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meter</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x5DF2;&#x77E5;&#x8303;&#x56F4;&#xFF08;&#x5C3A;&#x5EA6;&#xFF09;&#x5185;&#x7684;&#x6807;&#x91CF;&#x6D4B;&#x91CF;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x6587;&#x6863;&#x5185;&#x7684;&#x5BFC;&#x822A;&#x94FE;&#x63A5;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>progress</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x4EFB;&#x52A1;&#x8FDB;&#x5EA6;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rp</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x5728;&#x4E0D;&#x652F;&#x6301; ruby &#x6CE8;&#x91CA;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x663E;&#x793A;&#x4EC0;&#x4E48;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rt</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x5173;&#x4E8E;&#x5B57;&#x7B26;&#x7684;&#x89E3;&#x91CA;/&#x53D1;&#x97F3;&#xFF08;&#x7528;&#x4E8E;&#x4E1C;&#x4E9A;&#x5B57;&#x4F53;&#xFF09;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ruby</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49; ruby &#x6CE8;&#x91CA;&#xFF08;&#x7528;&#x4E8E;&#x4E1C;&#x4E9A;&#x5B57;&#x4F53;&#xFF09;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x6587;&#x6863;&#x4E2D;&#x7684;&#x8282;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>summary</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>details</span><span class="token punctuation">&gt;</span></span> &#x5143;&#x7D20;&#x7684;&#x53EF;&#x89C1;&#x6807;&#x9898;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x65E5;&#x671F;/&#x65F6;&#x95F4;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>wbr</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x53EF;&#x80FD;&#x7684;&#x6298;&#x884C;&#xFF08;line-break&#xFF09;&#x3002;
&#x9605;&#x8BFB;&#x66F4;&#x591A;&#x6709;&#x5173; HTML5 &#x8BED;&#x4E49;&#x7684;&#x5185;&#x5BB9;&#x3002;
</code></pre>
</li>
<li><h3 id="&#x65B0;&#x7684;&#x8868;&#x5355;&#x5143;&#x7D20;"><a name="&#x65B0;&#x7684;&#x8868;&#x5355;&#x5143;&#x7D20;" class="anchor-navigation-ex-anchor" href="#&#x65B0;&#x7684;&#x8868;&#x5355;&#x5143;&#x7D20;"><i class="fa fa-link" aria-hidden="true"></i></a>1.3.5. &#x65B0;&#x7684;&#x8868;&#x5355;&#x5143;&#x7D20;</h3>
</li>
<li><pre class="language-"><code class="lang-html">&#x6807;&#x7B7E;    &#x63CF;&#x8FF0;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>datalist</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x8F93;&#x5165;&#x63A7;&#x4EF6;&#x7684;&#x9884;&#x5B9A;&#x4E49;&#x9009;&#x9879;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>keygen</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x952E;&#x5BF9;&#x751F;&#x6210;&#x5668;&#x5B57;&#x6BB5;&#xFF08;&#x7528;&#x4E8E;&#x8868;&#x5355;&#xFF09;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>output</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x8BA1;&#x7B97;&#x7ED3;&#x679C;&#x3002;
</code></pre>
</li>
<li><h3 id="&#x65B0;&#x7684;&#x8F93;&#x5165;&#x7C7B;&#x578B;"><a name="&#x65B0;&#x7684;&#x8F93;&#x5165;&#x7C7B;&#x578B;" class="anchor-navigation-ex-anchor" href="#&#x65B0;&#x7684;&#x8F93;&#x5165;&#x7C7B;&#x578B;"><i class="fa fa-link" aria-hidden="true"></i></a>1.3.6. &#x65B0;&#x7684;&#x8F93;&#x5165;&#x7C7B;&#x578B;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token comment">&lt;!-- &#x65B0;&#x7684;&#x8F93;&#x5165;&#x7C7B;&#x578B; --&gt;</span>    
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
<span class="token comment">&lt;!-- &#x65B0;&#x7684;&#x8F93;&#x5165;&#x5C5E;&#x6027; --&gt;</span>
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height &#x548C; width
list
min &#x548C; max
multiple
pattern (regexp)
placeholder
required
step
</code></pre>
</li>
<li><h3 id="html5&#x56FE;&#x50CF;"><a name="html5&#x56FE;&#x50CF;" class="anchor-navigation-ex-anchor" href="#html5&#x56FE;&#x50CF;"><i class="fa fa-link" aria-hidden="true"></i></a>1.3.7. HTML5&#x56FE;&#x50CF;</h3>
</li>
<li><pre class="language-"><code class="lang-html">&#x6807;&#x7B7E;    &#x63CF;&#x8FF0;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>canvas</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x4F7F;&#x7528; JavaScript &#x7684;&#x56FE;&#x50CF;&#x7ED8;&#x5236;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x4F7F;&#x7528; SVG &#x7684;&#x56FE;&#x50CF;&#x7ED8;&#x5236;&#x3002;
</code></pre>
</li>
<li><h3 id="&#x65B0;&#x7684;&#x5A92;&#x4ECB;&#x5143;&#x7D20;"><a name="&#x65B0;&#x7684;&#x5A92;&#x4ECB;&#x5143;&#x7D20;" class="anchor-navigation-ex-anchor" href="#&#x65B0;&#x7684;&#x5A92;&#x4ECB;&#x5143;&#x7D20;"><i class="fa fa-link" aria-hidden="true"></i></a>1.3.8. &#x65B0;&#x7684;&#x5A92;&#x4ECB;&#x5143;&#x7D20;</h3>
</li>
<li><pre class="language-"><code class="lang-html">&#x6807;&#x7B7E;    &#x63CF;&#x8FF0;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>audio</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x58F0;&#x97F3;&#x6216;&#x97F3;&#x4E50;&#x5185;&#x5BB9;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>embed</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x5916;&#x90E8;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x7684;&#x5BB9;&#x5668;&#xFF08;&#x6BD4;&#x5982;&#x63D2;&#x4EF6;&#xFF09;&#x3002;
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>embed</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>song.mp3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>object</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>song.mp3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>object</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span><span class="token punctuation">&gt;</span></span> &#x548C; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>audio</span><span class="token punctuation">&gt;</span></span> &#x7684;&#x6765;&#x6E90;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>track</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span><span class="token punctuation">&gt;</span></span> &#x548C; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>audio</span><span class="token punctuation">&gt;</span></span> &#x7684;&#x8F68;&#x9053;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span><span class="token punctuation">&gt;</span></span>    &#x5B9A;&#x4E49;&#x89C6;&#x9891;&#x6216;&#x5F71;&#x7247;&#x5185;&#x5BB9;&#x3002;
</code></pre>
</li>
<li><h2 id="&#x4ECE;-html4-&#x8FC1;&#x79FB;&#x81F3;-html5"><a name="&#x4ECE;-html4-&#x8FC1;&#x79FB;&#x81F3;-html5" class="anchor-navigation-ex-anchor" href="#&#x4ECE;-html4-&#x8FC1;&#x79FB;&#x81F3;-html5"><i class="fa fa-link" aria-hidden="true"></i></a>1.4. &#x4ECE; HTML4 &#x8FC1;&#x79FB;&#x81F3; HTML5</h2>
</li>
<li><pre class="language-"><code class="lang-html">&#x5178;&#x578B;&#x7684; HTML4    &#x5178;&#x578B;&#x7684; HTML5
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>menu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>post<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">&gt;</span></span>

    &#x4FEE;&#x6539;&#x6587;&#x6863;&#x7C7B;&#x578B;&#xFF0C;&#x4ECE; HTML4 doctype&#xFF1A;
<span class="token doctype">&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; 
&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;</span>
    &#x4FEE;&#x6539;&#x4E3A; HTML5 doctype&#xFF1A;
<span class="token doctype">&lt;!DOCTYPE html&gt;</span>

    &#x4FEE;&#x6539;&#x7F16;&#x7801;&#x4FE1;&#x606F;&#xFF0C;&#x4ECE; HTML4&#xFF1A;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Content-Type<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/html;charset=utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
&#x6539;&#x4E3A; HTML5&#xFF1A;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
</ul>
<h1 id="javascript"><a name="javascript" class="anchor-navigation-ex-anchor" href="#javascript"><i class="fa fa-link" aria-hidden="true"></i></a>2. JavaScript</h1>
<ul>
<li><h3 id="javascript-&#x6570;&#x7EC4;"><a name="javascript-&#x6570;&#x7EC4;" class="anchor-navigation-ex-anchor" href="#javascript-&#x6570;&#x7EC4;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript &#x6570;&#x7EC4;</h3>
</li>
<li><p>```javascript
var cars=new Array();
var cars=new Array(&quot;Audi&quot;,&quot;BMW&quot;,&quot;Volvo&quot;);
var cars=[&quot;Audi&quot;,&quot;BMW&quot;,&quot;Volvo&quot;];</p>
<!-- 连接两个数组使用concat()方法 -->
<p>var arr = new Array(3)<br>arr[0] = &quot;George&quot;<br>arr[1] = &quot;John&quot;<br>arr[2] = &quot;Thomas&quot;<br>var arr2 = new Array(3)<br>arr2[0] = &quot;James&quot;<br>arr2[1] = &quot;Adrew&quot;<br>arr2[2] = &quot;Martin&quot;<br>document.write(arr.concat(arr2))</p>
<!--  array遍历的三种方法 -->
<ol>
<li>for(var x=0;x&lt;array.length;x++)</li>
<li>for x in array</li>
<li>array.join()    <!-- 以逗号进行分割，如若使用自定义分割字符，使用Join("xxx") --></li>
</ol>
</li>
</ul>
  <!-- 对数组进行排序 -->
<p>  array.sort()    <!-- 若是string按照字母表排序，若是数字，从小到大排序 --></p>
<pre class="language-"><code>
* ### JavaScript &#x5BF9;&#x8C61;

* ```javascript
  var person={firstname:&quot;Bill&quot;, lastname:&quot;Gates&quot;, id:5566};
  //&#x5BF9;&#x8C61;&#x5C5E;&#x6027;&#x7684;&#x4E24;&#x79CD;&#x5BFB;&#x5740;&#x65B9;&#x5F0F;
  name=person.lastname;
  name=person[&quot;lastname&quot;];
  //&#x540C;&#x65F6;&#x521B;&#x5EFA;
  person=new Object();
  person.firstname=&quot;Bill&quot;;
  person.lastname=&quot;Gates&quot;;
  person.age=56;
  person.eyecolor=&quot;blue&quot;;
</code></pre><ul>
<li><h3 id="javascript-math-&#x5BF9;&#x8C61;"><a name="javascript-math-&#x5BF9;&#x8C61;" class="anchor-navigation-ex-anchor" href="#javascript-math-&#x5BF9;&#x8C61;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript Math &#x5BF9;&#x8C61;</h3>
<pre class="language-"><code class="lang-javascript">  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x56DB;&#x820D;&#x4E94;&#x5165; <span class="token operator">--</span><span class="token operator">&gt;</span>
  document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">0.60</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;br /&gt;&quot;</span><span class="token punctuation">)</span>
  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x968F;&#x673A;&#x4E00;&#x4E2A;<span class="token number">0</span><span class="token operator">-</span><span class="token number">1</span>&#x4E4B;&#x95F4;&#x7684;&#x5B9E;&#x6570; <span class="token operator">--</span><span class="token operator">&gt;</span>
  document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x8FD4;&#x56DE;&#x6700;&#x5927;&#x6700;&#x5C0F;&#x503C; <span class="token operator">--</span><span class="token operator">&gt;</span>
  document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;br /&gt;&quot;</span><span class="token punctuation">)</span>
</code></pre>
</li>
<li><h3 id="javascript-&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;"><a name="javascript-&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;" class="anchor-navigation-ex-anchor" href="#javascript-&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript &#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;</h3>
</li>
<li><pre class="language-"><code class="lang-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> RegExp &#x5BF9;&#x8C61;&#x6709; <span class="token number">3</span> <span class="token function">&#x4E2A;&#x65B9;&#x6CD5;&#xFF1A;test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token function">&#x3001;exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span> &#x4EE5;&#x53CA; <span class="token function">compile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token keyword">var</span> patt<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">&quot;&#x6B63;&#x5219;&quot;</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>patt<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&quot;&#x6D4B;&#x8BD5;&#x5B57;&#x7B26;&#x4E32;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x8FD4;&#x56DE;boolean <span class="token operator">--</span><span class="token operator">&gt;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>patt<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token string">&quot;&#x6D4B;&#x8BD5;&#x5B57;&#x7B26;&#x4E32;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x627E;&#x5230;&#x8FD4;&#x56DE;&#x8BE5;string&#xFF0C; <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x5411; RegExp &#x5BF9;&#x8C61;&#x6DFB;&#x52A0;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x4EE5;&#x8BBE;&#x5B9A;&#x68C0;&#x7D22; <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token keyword">var</span> patt1<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">&quot;e&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;g&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">do</span>
<span class="token punctuation">{</span>
result<span class="token operator">=</span>patt1<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token string">&quot;The best things in life are free&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">while</span> <span class="token punctuation">(</span>result<span class="token operator">!=</span><span class="token keyword">null</span><span class="token punctuation">)</span>     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x8F93;&#x51FA;&#xFF1A;eeeenull <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token function">compile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> &#x65B9;&#x6CD5;&#x7528;&#x4E8E;&#x6539;&#x53D8; RegExp<span class="token punctuation">,</span><span class="token function">compile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> &#x65E2;&#x53EF;&#x4EE5;&#x6539;&#x53D8;&#x68C0;&#x7D22;&#x6A21;&#x5F0F;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x6DFB;&#x52A0;&#x6216;&#x5220;&#x9664;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x8FD4;&#x56DE;Boolean <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token keyword">var</span> patt1<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">&quot;e&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>patt1<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&quot;The best things in life are free&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
patt1<span class="token punctuation">.</span><span class="token function">compile</span><span class="token punctuation">(</span><span class="token string">&quot;d&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>patt1<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&quot;The best things in life are free&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li><h3 id="javascript&#x51FD;&#x6570;"><a name="javascript&#x51FD;&#x6570;" class="anchor-navigation-ex-anchor" href="#javascript&#x51FD;&#x6570;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript&#x51FD;&#x6570;</h3>
</li>
<li><pre class="language-"><code class="lang-javascript"><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">&#x53C2;&#x6570;<span class="token number">1</span><span class="token punctuation">,</span>&#x53C2;&#x6570;<span class="token number">2</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> x<span class="token punctuation">;</span><span class="token comment">//&#x8FD4;&#x56DE;&#x503C;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>```</p>
</li>
<li><h3 id="&#x6BD4;&#x8F83;&#x8FD0;&#x7B97;&#x7B26;-&#x4E09;&#x5143;&#x8FD0;&#x7B97;&#x7B26;"><a name="&#x6BD4;&#x8F83;&#x8FD0;&#x7B97;&#x7B26;-&#x4E09;&#x5143;&#x8FD0;&#x7B97;&#x7B26;" class="anchor-navigation-ex-anchor" href="#&#x6BD4;&#x8F83;&#x8FD0;&#x7B97;&#x7B26;-&#x4E09;&#x5143;&#x8FD0;&#x7B97;&#x7B26;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6BD4;&#x8F83;&#x8FD0;&#x7B97;&#x7B26; ,&#x4E09;&#x5143;&#x8FD0;&#x7B97;&#x7B26;</h3>
</li>
<li><p>| ===  | &#x5168;&#x7B49;&#xFF08;&#x503C;&#x548C;&#x7C7B;&#x578B;&#xFF09; | x===5 &#x4E3A; true&#xFF1B;x===&quot;5&quot; &#x4E3A; false |
| :--- | ---------------- | ------------------------------- |
|      |                  |                                 |</p>
<ul>
<li><h3 id="greetingvisitorpresdear-president-dear-"><a name="greetingvisitorpresdear-president-dear-" class="anchor-navigation-ex-anchor" href="#greetingvisitorpresdear-president-dear-"><i class="fa fa-link" aria-hidden="true"></i></a>greeting=(visitor==&quot;PRES&quot;)?&quot;Dear President &quot;:&quot;Dear &quot;;</h3>
</li>
</ul>
</li>
<li><h3 id="forin-&#x5FAA;&#x73AF;"><a name="forin-&#x5FAA;&#x73AF;" class="anchor-navigation-ex-anchor" href="#forin-&#x5FAA;&#x73AF;"><i class="fa fa-link" aria-hidden="true"></i></a>For/In &#x5FAA;&#x73AF;</h3>
</li>
<li><pre class="language-"><code class="lang-javascript"><span class="token keyword">var</span> person<span class="token operator">=</span><span class="token punctuation">{</span>fname<span class="token operator">:</span><span class="token string">&quot;John&quot;</span><span class="token punctuation">,</span>lname<span class="token operator">:</span><span class="token string">&quot;Doe&quot;</span><span class="token punctuation">,</span>age<span class="token operator">:</span><span class="token number">25</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>x <span class="token keyword">in</span> person<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
txt<span class="token operator">=</span>txt <span class="token operator">+</span> person<span class="token punctuation">[</span>x<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li><h3 id="javascript-&#x6807;&#x7B7E;"><a name="javascript-&#x6807;&#x7B7E;" class="anchor-navigation-ex-anchor" href="#javascript-&#x6807;&#x7B7E;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript &#x6807;&#x7B7E;</h3>
</li>
<li><pre class="language-"><code class="lang-javascript">label<span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token keyword">do</span> something here<span class="token punctuation">;</span>
    <span class="token keyword">break</span> label<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li><h3 id="javascript&#x53EF;&#x7528;&#x4E8E;&#x8868;&#x5355;&#x9A8C;&#x8BC1;"><a name="javascript&#x53EF;&#x7528;&#x4E8E;&#x8868;&#x5355;&#x9A8C;&#x8BC1;" class="anchor-navigation-ex-anchor" href="#javascript&#x53EF;&#x7528;&#x4E8E;&#x8868;&#x5355;&#x9A8C;&#x8BC1;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript&#x53EF;&#x7528;&#x4E8E;&#x8868;&#x5355;&#x9A8C;&#x8BC1;</h3>
</li>
<li><h3 id="javascript-window"><a name="javascript-window" class="anchor-navigation-ex-anchor" href="#javascript-window"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript Window</h3>
</li>
<li><pre class="language-"><code class="lang-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x83B7;&#x53D6;&#x5F53;&#x524D;&#x7A97;&#x53E3;&#x7684;&#x53EF;&#x7528;&#x9AD8;&#x5EA6;&#x548C;&#x5BBD;&#x5EA6; <span class="token operator">--</span><span class="token operator">&gt;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&#x53EF;&#x7528;&#x9AD8;&#x5EA6;&#xFF1A;&quot;</span> <span class="token operator">+</span> screen<span class="token punctuation">.</span>availHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&#x53EF;&#x7528;&#x5BBD;&#x5EA6;&#xFF1A;&quot;</span> <span class="token operator">+</span> screen<span class="token punctuation">.</span>availWidth<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x52A0;&#x8F7D;&#x65B0;&#x6587;&#x6863; <span class="token operator">--</span><span class="token operator">&gt;</span>
window<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token string">&quot;https://suofeiya.pro/&quot;</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>  &#x8FD4;&#x56DE;&#x4E0A;&#x4E00;&#x9875;&#x548C;&#x4E0B;&#x4E00;&#x9875; <span class="token operator">--</span><span class="token operator">&gt;</span>
window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> window<span class="token punctuation">.</span>navigator &#x5BF9;&#x8C61;&#x5728;&#x7F16;&#x5199;&#x65F6;&#x53EF;&#x4E0D;&#x4F7F;&#x7528; window &#x8FD9;&#x4E2A;&#x524D;&#x7F00; <span class="token operator">--</span><span class="token operator">&gt;</span>
txt <span class="token operator">=</span> <span class="token string">&quot;&lt;p&gt;Browser CodeName: &quot;</span> <span class="token operator">+</span> navigator<span class="token punctuation">.</span>appCodeName <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">;</span>
txt<span class="token operator">+=</span> <span class="token string">&quot;&lt;p&gt;Browser Name: &quot;</span> <span class="token operator">+</span> navigator<span class="token punctuation">.</span>appName <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">;</span>
txt<span class="token operator">+=</span> <span class="token string">&quot;&lt;p&gt;Browser Version: &quot;</span> <span class="token operator">+</span> navigator<span class="token punctuation">.</span>appVersion <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">;</span>
txt<span class="token operator">+=</span> <span class="token string">&quot;&lt;p&gt;Cookies Enabled: &quot;</span> <span class="token operator">+</span> navigator<span class="token punctuation">.</span>cookieEnabled <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">;</span>
txt<span class="token operator">+=</span> <span class="token string">&quot;&lt;p&gt;Platform: &quot;</span> <span class="token operator">+</span> navigator<span class="token punctuation">.</span>platform <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">;</span>
txt<span class="token operator">+=</span> <span class="token string">&quot;&lt;p&gt;User-agent header: &quot;</span> <span class="token operator">+</span> navigator<span class="token punctuation">.</span>userAgent <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">;</span>
txt<span class="token operator">+=</span> <span class="token string">&quot;&lt;p&gt;User-agent language: &quot;</span> <span class="token operator">+</span> navigator<span class="token punctuation">.</span>systemLanguage <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;example&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>txt<span class="token punctuation">;</span>
</code></pre>
</li>
<li><h3 id="javascript&#x6D88;&#x606F;&#x6846;"><a name="javascript&#x6D88;&#x606F;&#x6846;" class="anchor-navigation-ex-anchor" href="#javascript&#x6D88;&#x606F;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript&#x6D88;&#x606F;&#x6846;</h3>
</li>
<li><pre class="language-"><code class="lang-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x4E09;&#x79CD;&#x6D88;&#x606F;&#x6846; <span class="token operator">--</span><span class="token operator">&gt;</span>
&#x8B66;&#x544A;&#x6846;<span class="token punctuation">,</span>&#x786E;&#x8BA4;&#x6846;<span class="token punctuation">,</span>&#x63D0;&#x793A;&#x6846;
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x7B80;&#x5355;&#x793A;&#x4F8B; <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token keyword">function</span> <span class="token function">disp_alert</span><span class="token punctuation">(</span><span class="token punctuation">)</span>                         
<span class="token punctuation">{</span>                                             
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;&#x6211;&#x662F;&#x8B66;&#x544A;&#x6846;&#xFF01;&#xFF01;&quot;</span><span class="token operator">+</span><span class="token string">&apos;\n&apos;</span><span class="token operator">+</span><span class="token string">&quot;&#x6211;&#x662F;&#x8B66;&#x544A;&#x7B2C;&#x4E8C;&#x884C;&quot;</span><span class="token punctuation">)</span> 
<span class="token punctuation">}</span>                                             

<span class="token keyword">function</span> <span class="token function">show_confirm</span><span class="token punctuation">(</span><span class="token punctuation">)</span>          
<span class="token punctuation">{</span>                                
<span class="token keyword">var</span> r<span class="token operator">=</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">&quot;Press a button!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>r<span class="token operator">==</span><span class="token boolean">true</span><span class="token punctuation">)</span>                     
  <span class="token punctuation">{</span>                              
  <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;You pressed OK!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      
  <span class="token punctuation">}</span>                              
<span class="token keyword">else</span>                             
  <span class="token punctuation">{</span>                              
  <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;You pressed Cancel!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  
  <span class="token punctuation">}</span>                              
<span class="token punctuation">}</span>                                

<span class="token keyword">function</span> <span class="token function">disp_prompt</span><span class="token punctuation">(</span><span class="token punctuation">)</span>                                    
  <span class="token punctuation">{</span>                                                       
  <span class="token keyword">var</span> name<span class="token operator">=</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">&quot;&#x8BF7;&#x8F93;&#x5165;&#x60A8;&#x7684;&#x540D;&#x5B57;&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;Bill Gates&quot;</span><span class="token punctuation">)</span>          
  <span class="token keyword">if</span> <span class="token punctuation">(</span>name<span class="token operator">!=</span><span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> name<span class="token operator">!=</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span>                             
    <span class="token punctuation">{</span>                                                     
    document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&#x4F60;&#x597D;&#xFF01;&quot;</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">&quot; &#x4ECA;&#x5929;&#x8FC7;&#x5F97;&#x600E;&#x4E48;&#x6837;&#xFF1F;&quot;</span><span class="token punctuation">)</span> 
    <span class="token punctuation">}</span>                                                     
  <span class="token punctuation">}</span>
</code></pre>
</li>
<li><h3 id="javascript&#x8BA1;&#x65F6;"><a name="javascript&#x8BA1;&#x65F6;" class="anchor-navigation-ex-anchor" href="#javascript&#x8BA1;&#x65F6;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript&#x8BA1;&#x65F6;</h3>
</li>
<li><pre class="language-"><code class="lang-javascript"><span class="token keyword">var</span> t<span class="token operator">=</span><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token string">&quot;alert(&apos;5 &#x79D2;&#xFF01;&apos;)&quot;</span><span class="token punctuation">,</span><span class="token number">5000</span><span class="token punctuation">)</span>
</code></pre>
</li>
<li><h3 id="&#x6539;&#x53D8;html-dom&#xFF08;html-dom-&#x7684;-document-&#x4E5F;&#x662F;-window-&#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027;&#x4E4B;&#x4E00;&#xFF09;"><a name="&#x6539;&#x53D8;html-dom&#xFF08;html-dom-&#x7684;-document-&#x4E5F;&#x662F;-window-&#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027;&#x4E4B;&#x4E00;&#xFF09;" class="anchor-navigation-ex-anchor" href="#&#x6539;&#x53D8;html-dom&#xFF08;html-dom-&#x7684;-document-&#x4E5F;&#x662F;-window-&#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027;&#x4E4B;&#x4E00;&#xFF09;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6539;&#x53D8;HTML-DOM&#xFF08;HTML DOM &#x7684; document &#x4E5F;&#x662F; window &#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027;&#x4E4B;&#x4E00;&#xFF09;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>image<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/i/eg_tulip.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span>
document.getElementById(&quot;image&quot;).src=&quot;/i/shanghai_lupu_bridge.jpg&quot;;
window.document.getElementById(&quot;image&quot;)
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>&#x539F;&#x59CB;&#x56FE;&#x7247;&#x662F;&#x90C1;&#x91D1;&#x9999;&#xFF08;eg_tulip.jpg&#xFF09;&#xFF0C;&#x4F46;&#x662F;&#x5DF2;&#x88AB;&#x4FEE;&#x6539;&#x4E3A;&#x5362;&#x6D66;&#x5927;&#x6865;&#xFF08;shanghai_lupu_bridge.jpg&#xFF09;&#x3002;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &#x6539;&#x53D8;&#x6807;&#x7B7E;style&#x6837;&#x5F0F; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>p2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Hello World!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span>
document.getElementById(&quot;p2&quot;).style.color=&quot;blue&quot;;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li><h3 id="dom&#x4E8B;&#x4EF6;"><a name="dom&#x4E8B;&#x4EF6;" class="anchor-navigation-ex-anchor" href="#dom&#x4E8B;&#x4EF6;"><i class="fa fa-link" aria-hidden="true"></i></a>DOM&#x4E8B;&#x4EF6;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>this.innerHTML=&apos;&#x8C22;&#x8C22;!&apos;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8BF7;&#x70B9;&#x51FB;&#x8BE5;&#x6587;&#x672C;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>

&#x5411; button &#x5143;&#x7D20;&#x5206;&#x914D; onclick &#x4E8B;&#x4EF6;&#xFF1A;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span>
document.getElementById(&quot;myBtn&quot;).onclick=function(){displayDate()};
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

onload &#x548C; onunload &#x4E8B;&#x4EF6;&#x4F1A;&#x5728;&#x7528;&#x6237;&#x8FDB;&#x5165;&#x6216;&#x79BB;&#x5F00;&#x9875;&#x9762;&#x65F6;&#x88AB;&#x89E6;&#x53D1;&#x3002;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span> <span class="token attr-name">onload</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkCookies()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

onchange &#x4E8B;&#x4EF6;&#x5E38;&#x7ED3;&#x5408;&#x5BF9;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x7684;&#x9A8C;&#x8BC1;&#x6765;&#x4F7F;&#x7528;&#x3002;&#x79BB;&#x5F00;&#x65F6;&#x89E6;&#x53D1;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fname<span class="token punctuation">&quot;</span></span> <span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>upperCase()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

onmouseover &#x548C; onmouseout &#x4E8B;&#x4EF6;&#x53EF;&#x7528;&#x4E8E;&#x5728;&#x7528;&#x6237;&#x7684;&#x9F20;&#x6807;&#x79FB;&#x81F3; HTML &#x5143;&#x7D20;&#x4E0A;&#x65B9;&#x6216;&#x79FB;&#x51FA;&#x5143;&#x7D20;&#x65F6;&#x89E6;&#x53D1;&#x51FD;&#x6570;&#x3002;

onmousedown, onmouseup &#x4EE5;&#x53CA; onclick &#x6784;&#x6210;&#x4E86;&#x9F20;&#x6807;&#x70B9;&#x51FB;&#x4E8B;&#x4EF6;&#x7684;&#x6240;&#x6709;&#x90E8;&#x5206;&#x3002;&#x9996;&#x5148;&#x5F53;&#x70B9;&#x51FB;&#x9F20;&#x6807;&#x6309;&#x94AE;&#x65F6;&#xFF0C;&#x4F1A;&#x89E6;&#x53D1; onmousedown &#x4E8B;&#x4EF6;&#xFF0C;&#x5F53;&#x91CA;&#x653E;&#x9F20;&#x6807;&#x6309;&#x94AE;&#x65F6;&#xFF0C;&#x4F1A;&#x89E6;&#x53D1; onmouseup &#x4E8B;&#x4EF6;&#xFF0C;&#x6700;&#x540E;&#xFF0C;&#x5F53;&#x5B8C;&#x6210;&#x9F20;&#x6807;&#x70B9;&#x51FB;&#x65F6;&#xFF0C;&#x4F1A;&#x89E6;&#x53D1; onclick &#x4E8B;&#x4EF6;&#x3002;
</code></pre>
</li>
</ul>
<ul>
<li><h3 id="&#x521B;&#x5EFA;&#x65B0;&#x7684;-html-&#x5143;&#x7D20;"><a name="&#x521B;&#x5EFA;&#x65B0;&#x7684;-html-&#x5143;&#x7D20;" class="anchor-navigation-ex-anchor" href="#&#x521B;&#x5EFA;&#x65B0;&#x7684;-html-&#x5143;&#x7D20;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x521B;&#x5EFA;&#x65B0;&#x7684; HTML &#x5143;&#x7D20;</h3>
</li>
<li><pre class="language-"><code class="lang-html"><span class="token comment">&lt;!-- &#x5E94;&#x7528;&#x793A;&#x4F8B;,&#x6DFB;&#x52A0;&#x5143;&#x7D20; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>div1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>p1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x6BB5;&#x843D;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>p2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x53E6;&#x4E00;&#x4E2A;&#x6BB5;&#x843D;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span>
var para=document.createElement(&quot;p&quot;);
var node=document.createTextNode(&quot;&#x8FD9;&#x662F;&#x65B0;&#x6BB5;&#x843D;&#x3002;&quot;);
para.appendChild(node);

var element=document.getElementById(&quot;div1&quot;);
element.appendChild(para);
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &#x4ECE;&#x7236;&#x5143;&#x7D20;&#x4E2D;&#x5220;&#x9664;&#x5B50;&#x5143;&#x7D20; --&gt;</span>
parent.removeChild(child);
</code></pre>
<p>```</p>
</li>
<li><h3 id="&#x6240;&#x6709;-javascript-&#x6570;&#x5B57;&#x5747;&#x4E3A;-64-&#x4F4D;"><a name="&#x6240;&#x6709;-javascript-&#x6570;&#x5B57;&#x5747;&#x4E3A;-64-&#x4F4D;" class="anchor-navigation-ex-anchor" href="#&#x6240;&#x6709;-javascript-&#x6570;&#x5B57;&#x5747;&#x4E3A;-64-&#x4F4D;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6240;&#x6709; JavaScript &#x6570;&#x5B57;&#x5747;&#x4E3A; 64 &#x4F4D;</h3>
</li>
<li><h3 id="javascript-string&#x7C7B;&#x578B;"><a name="javascript-string&#x7C7B;&#x578B;" class="anchor-navigation-ex-anchor" href="#javascript-string&#x7C7B;&#x578B;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript String&#x7C7B;&#x578B;</h3>
</li>
<li><pre class="language-"><code class="lang-javascript"><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;text/javascript&quot;</span><span class="token operator">&gt;</span>

<span class="token keyword">var</span> txt<span class="token operator">=</span><span class="token string">&quot;Hello World!&quot;</span>

document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Big: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">big</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Small: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">small</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>

document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Bold: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">bold</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Italic: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">italics</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>

document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Blink: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">blink</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot; (does not work in IE)&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Fixed: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">fixed</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Strike: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">strike</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>

document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Fontcolor: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">fontcolor</span><span class="token punctuation">(</span><span class="token string">&quot;Red&quot;</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Fontsize: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">fontsize</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>

document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Lowercase: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Uppercase: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>

document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Subscript: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">sub</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Superscript: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">sup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>

document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;p&gt;Link: &quot;</span> <span class="token operator">+</span> txt<span class="token punctuation">.</span><span class="token function">link</span><span class="token punctuation">(</span><span class="token string">&quot;http://www.w3school.com.cn&quot;</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;/p&gt;&quot;</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x66FF;&#x6362;&#x5B57;&#x7B26;&#x4E32; <span class="token operator">--</span><span class="token operator">&gt;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/Microsoft/</span><span class="token punctuation">,</span><span class="token string">&quot;W3School&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x67E5;&#x627E;&#x5B57;&#x7B26;&#x4E32;&#xFF0C;&#x627E;&#x5230;&#x5B57;&#x7B26;&#x4E32;&#x5219;&#x8FD4;&#x56DE;&#x8BE5;&#x5B57;&#x7B26;&#x4E32;&#xFF0C;&#x5982;&#x672A;&#x627E;&#x5230;&#xFF0C;&#x5219;&#x8FD4;&#x56DE;<span class="token keyword">null</span>&#x503C; <span class="token operator">--</span><span class="token operator">&gt;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token string">&quot;world&quot;</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;br /&gt;&quot;</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x67E5;&#x627E;&#x5B57;&#x7B26;&#x4E32;&#x7684;&#x7D22;&#x5F15; <span class="token operator">--</span><span class="token operator">&gt;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;World&quot;</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&lt;br /&gt;&quot;</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre>
</li>
<li><h3 id="javascript&#x4E2D;&#x7684;---&#x4E00;&#x4E9B;&#x5C5E;&#x6027;&#x4EE5;&#x53CA;&#x65B9;&#x6CD5;"><a name="javascript&#x4E2D;&#x7684;---&#x4E00;&#x4E9B;&#x5C5E;&#x6027;&#x4EE5;&#x53CA;&#x65B9;&#x6CD5;" class="anchor-navigation-ex-anchor" href="#javascript&#x4E2D;&#x7684;---&#x4E00;&#x4E9B;&#x5C5E;&#x6027;&#x4EE5;&#x53CA;&#x65B9;&#x6CD5;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript&#x4E2D;&#x7684;   &#x4E00;&#x4E9B;&#x5C5E;&#x6027;&#x4EE5;&#x53CA;&#x65B9;&#x6CD5;</h3>
</li>
<li><pre class="language-"><code class="lang-javascript">document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token function">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token function">&#x4E0D;&#x80FD;&#x4F7F;&#x7528;Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span>&#x6765;&#x4EE3;&#x66FF; <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token keyword">var</span> d<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&#x4ECE; 1970/01/01 &#x81F3;&#x4ECA;&#x5DF2;&#x8FC7;&#x53BB; &quot;</span> <span class="token operator">+</span> d<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot; &#x6BEB;&#x79D2;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x81EA;&#x5B9A;&#x4E49;&#x8BBE;&#x7F6E;&#x65E5;&#x671F; <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
d<span class="token punctuation">.</span><span class="token function">setFullYear</span><span class="token punctuation">(</span><span class="token number">1992</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token function">toUTCString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> &#x5C06;&#x5F53;&#x65E5;&#x7684;&#x65E5;&#x671F;&#xFF08;&#x6839;&#x636E; <span class="token constant">UTC</span>&#xFF09;&#x8F6C;&#x6362;&#x4E3A;&#x5B57;&#x7B26;&#x4E32; <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">write</span> <span class="token punctuation">(</span>d<span class="token punctuation">.</span><span class="token function">toUTCString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token function">&#x5229;&#x7528;getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span>&#x548C;&#x6570;&#x7EC4;&#x8FD4;&#x56DE;&#x4ECA;&#x5929;&#x662F;&#x661F;&#x671F;&#x51E0; <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token keyword">var</span> d<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> weekday<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">)</span>
weekday<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">&quot;&#x661F;&#x671F;&#x65E5;&quot;</span>
weekday<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">&quot;&#x661F;&#x671F;&#x4E00;&quot;</span>
weekday<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">&quot;&#x661F;&#x671F;&#x4E8C;&quot;</span>
weekday<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">&quot;&#x661F;&#x671F;&#x4E09;&quot;</span>
weekday<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">&quot;&#x661F;&#x671F;&#x56DB;&quot;</span>
weekday<span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">&quot;&#x661F;&#x671F;&#x4E94;&quot;</span>
weekday<span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">&quot;&#x661F;&#x671F;&#x516D;&quot;</span>

document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;&#x4ECA;&#x5929;&#x662F;&quot;</span> <span class="token operator">+</span> weekday<span class="token punctuation">[</span>d<span class="token punctuation">.</span><span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre>
</li>
<li><h3 id="javascript-&#x6846;&#x67B6;"><a name="javascript-&#x6846;&#x67B6;" class="anchor-navigation-ex-anchor" href="#javascript-&#x6846;&#x67B6;"><i class="fa fa-link" aria-hidden="true"></i></a>JavaScript &#x6846;&#x67B6;</h3>
<ul>
<li>JQuery    Prototype     MooTools</li>
</ul>
</li>
</ul>
<h1 id="css"><a name="css" class="anchor-navigation-ex-anchor" href="#css"><i class="fa fa-link" aria-hidden="true"></i></a>3. CSS</h1>
<ul>
<li><h3 id="&#x521B;&#x5EFA;css"><a name="&#x521B;&#x5EFA;css" class="anchor-navigation-ex-anchor" href="#&#x521B;&#x5EFA;css"><i class="fa fa-link" aria-hidden="true"></i></a>&#x521B;&#x5EFA;css</h3>
</li>
<li><pre class="language-"><code class="lang-html">&#x5916;&#x90E8;&#x6837;&#x5F0F;&#x8868;:&#x4F7F;&#x7528;link&#x6807;&#x7B7E;&#x94FE;&#x63A5;&#x5916;&#x90E8;css&#x6587;&#x4EF6;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/css/csstest_01.css<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
&#x5185;&#x90E8;&#x6837;&#x5F0F;&#x8868;:
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"><span class="token selector">.css</span><span class="token punctuation">{</span>...<span class="token punctuation">}</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
&#x5185;&#x8054;&#x6837;&#x5F0F;:
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">=&quot;</span><span class="token attr-value"><span class="token property">color</span><span class="token punctuation">:</span> sienna<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 20px</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre>
</li>
<li><h3 id="css&#x9009;&#x62E9;&#x5668;"><a name="css&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#css&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>css&#x9009;&#x62E9;&#x5668;</h3>
</li>
<li><pre class="language-"><code class="lang-css"><span class="token selector">&#x7C7B;&#x540D;&#x9009;&#x62E9;&#x5668;
.center</span> <span class="token punctuation">{</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">}</span>
<span class="token selector">ID&#x9009;&#x62E9;&#x5668;
#sidebar</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span>
<span class="token selector">&#x6807;&#x7B7E;&#x9009;&#x62E9;&#x5668;
p strong</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span>
<span class="token selector">td.fancy</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span> <span class="token selector">fancy&#x7C7B;&#x540D;&#x4E0B;&#x7684;td&#x6807;&#x7B7E;
&#x5C5E;&#x6027;&#x9009;&#x62E9;&#x5668;
[title]</span>  <span class="token punctuation">{</span>...<span class="token punctuation">}</span> <span class="token selector">&#x5E26;&#x6709;title&#x5C5E;&#x6027;&#x7684;&#x624D;&#x4F1A;&#x88AB;&#x9009;&#x4E2D;
[title=suofeiya]</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span> <span class="token selector">&#x5E26;&#x6709;&#x7279;&#x5B9A;title&#x5C5E;&#x6027;&#x7684;&#x624D;&#x4F1A;&#x88AB;&#x9009;&#x4E2D;
[title~=hello]</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span> <span class="token selector">&#x5305;&#x542B;&#x5173;&#x7CFB;&#x7684;title&#x5C5E;&#x6027;&#x624D;&#x4F1A;&#x88AB;&#x9009;&#x4E2D;
[lang|en]&#x9009;&#x62E9; lang</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span> <span class="token selector">&#x9009;&#x4E2D;&#x5C5E;&#x6027;&#x503C;&#x4EE5; &quot;en&quot; &#x5F00;&#x5934;&#x7684;&#x5143;&#x7D20;
[attribute^/$=value]</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span> <span class="token selector">&#x9009;&#x4E2D;&#x5C5E;&#x6027;&#x4E3A;value&#x5F00;&#x5934;/&#x7ED3;&#x5C3E;&#x7684;
[attribute*=value]</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span> &#x9009;&#x4E2D;&#x5305;&#x542B;vlue&#x7684;&#x5143;&#x7D20;
</code></pre>
</li>
<li><h3 id="css&#x5C5E;&#x6027;&#x5BF9;&#x5E94;"><a name="css&#x5C5E;&#x6027;&#x5BF9;&#x5E94;" class="anchor-navigation-ex-anchor" href="#css&#x5C5E;&#x6027;&#x5BF9;&#x5E94;"><i class="fa fa-link" aria-hidden="true"></i></a>css&#x5C5E;&#x6027;&#x5BF9;&#x5E94;</h3>
</li>
<li><pre class="language-"><code class="lang-css">`<span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> &#x586B;&#x5145;&#x5185;&#x8FB9;&#x8DDD;<span class="token punctuation">,</span>20&#x50CF;&#x7D20;
<span class="token property">background-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span> &#x80CC;&#x666F;&#x900F;&#x660E;
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>image_url<span class="token punctuation">)</span></span><span class="token punctuation">;</span> &#x53EF;&#x4EE5;&#x4E3A;&#x6587;&#x672C;<span class="token punctuation">,</span>&#x94FE;&#x63A5;...&#x8BBE;&#x7F6E;&#x80CC;&#x666F;&#x56FE;            <span class="token property">background-position</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span> &#x8FD8;&#x6709;top&#x3001;bottom&#x3001;left&#x3001;right<span class="token punctuation">,</span>&#x8FD8;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x767E;&#x5206;&#x6BD4;&#x7684;&#x503C;&#x6216;&#x8005;&#x50CF;&#x7D20;&#x503C;&#x6765;&#x8FDB;&#x884C;&#x8BBE;&#x7F6E;
    <span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat-y<span class="token punctuation">;</span> &#x80CC;&#x666F;&#x91CD;&#x590D;<span class="token punctuation">,</span>x/y&#x65B9;&#x5411;&#x4E0A;&#x91CD;&#x590D;<span class="token punctuation">,</span>&#x53EF;&#x76F4;&#x63A5;repeat&#x6216;&#x8005;&#x8BBE;&#x7F6E;no-repeat
    <span class="token property">background-attachment</span><span class="token punctuation">:</span>fixed<span class="token punctuation">;</span> &#x56FA;&#x5B9A;&#x80CC;&#x666F;&#x56FE;&#x7247;
    ** <span class="token property">&#x53EF;&#x4EE5;&#x4F7F;&#x7528;background</span><span class="token punctuation">:</span> #ff0000 <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>/i/eg_bg_03.gif<span class="token punctuation">)</span></span> no-repeat fixed center<span class="token punctuation">;</span> &#x8BED;&#x6CD5;&#x7B80;&#x6D01;&#x4E66;&#x5199;`
</code></pre>
</li>
<li><pre class="language-"><code class="lang-css"><span class="token property">text-indent</span><span class="token punctuation">:</span> 5em<span class="token selector">; &#x6587;&#x672C;&#x7F29;&#x8FDB;5em,em&#x4EE3;&#x8868;&#x5F39;&#x6027;&#x5927;&#x5C0F;,&#x53EF;&#x4EE5;&#x7EE7;&#x627F;,&#x4F7F;&#x7528;&#x767E;&#x5206;&#x6BD4;,&#x5982;:div</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">p</span> <span class="token punctuation">{</span><span class="token property">text-indent</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span><span class="token punctuation">}</span>&#x7F29;&#x8FDB;100&#x4E2A;&#x50CF;&#x7D20;
<span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span> &#x6587;&#x672C;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;<span class="token punctuation">,</span>&#x6709;5&#x4E2A;&#x503C;<span class="token punctuation">,</span>&#x7B80;&#x5355;&#x7684;&#x4E09;&#x4E2A;&#x662F;right<span class="token punctuation">,</span>left&#x548C;center<span class="token punctuation">,</span>&#x6CE8;&#x610F;center&#x548C;&#x6807;&#x7B7E;&lt;CENTER&gt;&#x533A;&#x522B;&#x662F;&#x540E;&#x8005;&#x4F1A;&#x5BF9;&#x5176;&#x6574;&#x4E2A;&#x5143;&#x7D20;
<span class="token property">word-spacing</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> &#x6539;&#x53D8;&#x5355;&#x8BCD;&#x4E4B;&#x95F4;&#x7684;&#x95F4;&#x9694;<span class="token punctuation">,</span>&#x5355;&#x4F4D;px<span class="token punctuation">,</span>em
<span class="token property">letter-spacing</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> &#x6539;&#x53D8;&#x5B57;&#x7B26;&#x4E4B;&#x95F4;&#x7684;&#x95F4;&#x9694;
<span class="token property">text-transform</span><span class="token punctuation">:</span> none/uppercase/lowercase/capitalize<span class="token punctuation">;</span> &#x5206;&#x522B;&#x662F;&#x5BF9;&#x5355;&#x8BCD;&#x8FDB;&#x884C;&#x4E0D;&#x5904;&#x7406;<span class="token punctuation">,</span>&#x5168;&#x5927;&#x5199;<span class="token punctuation">,</span>&#x5168;&#x5C0F;&#x5199;<span class="token punctuation">,</span>&#x9996;&#x5B57;&#x6BCD;&#x5927;&#x5199;&#x5904;&#x7406;
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none/underline/overline/line-through/blink<span class="token punctuation">;</span> &#x5206;&#x522B;&#x8FDB;&#x884C;&#x4E0D;&#x5904;&#x7406;<span class="token punctuation">,</span>&#x4E0B;&#x5212;&#x7EBF;<span class="token punctuation">,</span>&#x4E0A;&#x5212;&#x7EBF;<span class="token punctuation">,</span>&#x5220;&#x9664;&#x7EBF;<span class="token punctuation">(</span>&#x7C7B;&#x4F3C;S/strike&#x6807;&#x7B7E;<span class="token punctuation">)</span><span class="token punctuation">,</span>&#x95EA;&#x70C1;&#x5904;&#x7406;<span class="token punctuation">,</span><span class="token property">&#x7528;&#x9014;</span><span class="token punctuation">:</span>&#x53EF;&#x4EE5;&#x7528;&#x6765;&#x5220;&#x9664;&#x8D85;&#x94FE;&#x63A5;&#x7684;&#x4E0B;&#x5212;&#x7EBF;
<span class="token property">direction</span><span class="token punctuation">:</span> rtl<span class="token punctuation">;</span>&#x6539;&#x53D8;&#x6587;&#x5B57;&#x65B9;&#x5411;<span class="token punctuation">,</span>&#x4ECE;&#x53F3;&#x5411;&#x5DE6;.
<span class="token property">white-space</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> &#x5904;&#x7406;&#x7A7A;&#x767D;&#x5B57;&#x7B26;<span class="token punctuation">,</span>&#x9ED8;&#x8BA4;&#x4F7F;&#x7528;normal&#x4F1A;&#x5408;&#x5E76;&#x591A;&#x4F59;&#x7684;&#x7A7A;&#x767D;&#x5B57;&#x7B26;&#x548C;&#x6362;&#x884C;&#x7B26;<span class="token punctuation">,</span>&#x8FD8;&#x6709;&#x53E6;&#x5916;&#x4E00;&#x4E2A;&#x503C;pre<span class="token punctuation">,</span>&#x4E0E;&#x4E0A;&#x8FF0;normal&#x76F8;&#x53CD;<span class="token punctuation">,</span>&#x53E6;&#x5916;nowrap&#x4E0D;&#x8FDB;&#x884C;&#x6362;&#x884C;<span class="token punctuation">,</span>&#x5F53; white-space &#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x4E3A; pre-wrap &#x65F6;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x4E0D;&#x4EC5;&#x4F1A;&#x4FDD;&#x7559;&#x7A7A;&#x767D;&#x7B26;&#x5E76;&#x4FDD;&#x7559;&#x6362;&#x884C;&#x7B26;&#xFF0C;&#x8FD8;&#x5141;&#x8BB8;&#x81EA;&#x52A8;&#x6362;&#x884C;<span class="token punctuation">,</span>&#x5F53; white-space &#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x4E3A; pre-line &#x65F6;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x4FDD;&#x7559;&#x6362;&#x884C;&#x7B26;&#xFF0C;&#x5E76;&#x5141;&#x8BB8;&#x81EA;&#x52A8;&#x6362;&#x884C;&#xFF0C;&#x4F46;&#x662F;&#x4F1A;&#x5408;&#x5E76;&#x7A7A;&#x767D;&#x7B26;&#xFF0C;&#x8FD9;&#x662F;&#x4E0E; pre-wrap &#x503C;&#x7684;&#x4E0D;&#x540C;&#x4E4B;&#x5904;<span class="token punctuation">,</span>&#x603B;&#x7ED3;<span class="token punctuation">,</span><span class="token property">&#x8868;&#x683C;</span><span class="token punctuation">:</span>
</code></pre>
</li>
<li><p>| &#x503C;       | &#x7A7A;&#x767D;&#x7B26; | &#x6362;&#x884C;&#x7B26; | &#x81EA;&#x52A8;&#x6362;&#x884C; |
| :------- | :----- | :----- | :------- |
| pre-line | &#x5408;&#x5E76;   | &#x4FDD;&#x7559;   | &#x5141;&#x8BB8;     |
| normal   | &#x5408;&#x5E76;   | &#x5FFD;&#x7565;   | &#x5141;&#x8BB8;     |
| nowrap   | &#x5408;&#x5E76;   | &#x5FFD;&#x7565;   | &#x4E0D;&#x5141;&#x8BB8;   |
| pre      | &#x4FDD;&#x7559;   | &#x4FDD;&#x7559;   | &#x4E0D;&#x5141;&#x8BB8;   |
| pre-wrap | &#x4FDD;&#x7559;   | &#x4FDD;&#x7559;   | &#x5141;&#x8BB8;     |</p>
</li>
<li><pre class="language-"><code class="lang-css"><span class="token selector">body</span> <span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span><span class="token punctuation">}</span> &#x7EDF;&#x4E00;&#x6587;&#x6863;&#x6240;&#x4F7F;&#x7528;&#x7684;&#x5B57;&#x4F53;<span class="token punctuation">,</span>&#x5F53;&#x7136;&#x53EF;&#x4EE5;&#x6307;&#x5B9A;&#x67D0;&#x4E00;&#x6807;&#x7B7E;&#x4E0B;&#x7684;&#x5B57;&#x4F53;&#x6837;&#x5F0F;<span class="token punctuation">,</span><span class="token property">&#x6B64;&#x5916;font-family</span><span class="token punctuation">:</span> Times<span class="token punctuation">,</span> TimesNR<span class="token punctuation">,</span> <span class="token string">&apos;New Century Schoolbook&apos;</span><span class="token punctuation">,</span>Georgia<span class="token punctuation">,</span> <span class="token string">&apos;New York&apos;</span><span class="token punctuation">(</span>&#x5B57;&#x4F53;&#x540D;&#x79F0;&#x5E26;&#x6709;&#x7A7A;&#x683C;&#x6216;&#x8005;&#x7279;&#x6B8A;&#x7B26;&#x53F7;&#x65F6;&#x8981;&#x4F7F;&#x7528;&#x5355;&#x5F15;&#x53F7;&#x5F15;&#x8D77;&#x6765;<span class="token punctuation">)</span><span class="token punctuation">,</span> serif<span class="token punctuation">;</span>  &#x8BBE;&#x7F6E;&#x591A;&#x4E2A;&#x5B57;&#x4F53;<span class="token punctuation">,</span>&#x53EF;&#x4EE5;&#x6309;&#x7167;&#x7528;&#x6237;&#x5B9E;&#x9645;&#x60C5;&#x51B5;&#x8FDB;&#x884C;&#x987A;&#x5E8F;&#x67E5;&#x627E;&#x53EF;&#x7528;&#x7684;&#x5B57;&#x4F53;
<span class="token property">font-style</span><span class="token punctuation">:</span>normal/italic/oblique<span class="token punctuation">;</span> &#x5206;&#x522B;&#x4EE3;&#x8868;&#x6B63;&#x5E38;<span class="token punctuation">,</span>&#x659C;&#x4F53;<span class="token punctuation">,</span>&#x659C;&#x4F53;<span class="token punctuation">,</span>italic&#x662F;&#x4E00;&#x79CD;&#x5B57;&#x4F53;&#x98CE;&#x683C;<span class="token punctuation">,</span>&#x5BF9;&#x5B57;&#x4F53;&#x7ED3;&#x6784;&#x8FDB;&#x884C;&#x7EC6;&#x5FAE;&#x53D8;&#x5316;<span class="token punctuation">,</span>&#x800C;&#x540E;&#x8005;&#x662F;&#x76F4;&#x63A5;&#x503E;&#x659C;<span class="token punctuation">,</span>&#x4F46;&#x662F;&#x6211;&#x89C9;&#x5F97;&#x770B;&#x8D77;&#x6765;&#x6CA1;&#x4EC0;&#x4E48;&#x5375;&#x533A;&#x522B;
<span class="token property">font-variant</span><span class="token punctuation">:</span>small-caps<span class="token punctuation">;</span> &#x5B57;&#x4F53;&#x7F29;&#x5C0F;&#x5E76;&#x5168;&#x8F6C;&#x6362;&#x4E3A;&#x5927;&#x5199;&#x53D1;&#x751F;&#x5F62;&#x53D8;
<span class="token property">font-weight</span><span class="token punctuation">:</span><span class="token function">normal</span><span class="token punctuation">(</span>400<span class="token punctuation">)</span>/<span class="token function">bold</span><span class="token punctuation">(</span>900<span class="token punctuation">)</span>/100-900<span class="token punctuation">;</span> &#x7C97;&#x7EC6;&#x7A0B;&#x5EA6;<span class="token punctuation">,</span>&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x6570;&#x5B57;&#x4EE3;&#x66FF;
<span class="token property">font-size</span><span class="token punctuation">:</span>14px<span class="token punctuation">;</span> &#x63A7;&#x5236;&#x5B57;&#x4F53;&#x5927;&#x5C0F;<span class="token punctuation">,</span>&#x63A8;&#x8350;&#x4F7F;&#x7528;em&#x6765;&#x8BBE;&#x7F6E;<span class="token punctuation">,</span>&#x50CF;&#x7D20;em&#x4E4B;&#x95F4;&#x8F6C;&#x6362;&#x5173;&#x7CFB;pixels/16=em <span class="token punctuation">,</span>em&#x662F;&#x4E00;&#x79CD;&#x5F39;&#x6027;&#x5927;&#x5C0F;&#x5355;&#x4F4D;
</code></pre>
</li>
<li><pre class="language-"><code class="lang-css"><span class="token selector">&#x94FE;&#x63A5;&#x6837;&#x5F0F;:
a:link</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#FF0000<span class="token punctuation">;</span><span class="token punctuation">}</span>    <span class="token comment">/* &#x672A;&#x88AB;&#x8BBF;&#x95EE;&#x7684;&#x94FE;&#x63A5; */</span>
<span class="token selector">a:visited</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#00FF00<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* &#x5DF2;&#x88AB;&#x8BBF;&#x95EE;&#x7684;&#x94FE;&#x63A5; */</span>
<span class="token selector">a:hover</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#FF00FF<span class="token punctuation">;</span><span class="token punctuation">}</span>   <span class="token comment">/* &#x9F20;&#x6807;&#x6307;&#x9488;&#x79FB;&#x52A8;&#x5230;&#x94FE;&#x63A5;&#x4E0A; */</span>
<span class="token selector">a:active</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#0000FF<span class="token punctuation">;</span><span class="token punctuation">}</span>  <span class="token comment">/* &#x6B63;&#x5728;&#x88AB;&#x70B9;&#x51FB;&#x7684;&#x94FE;&#x63A5; */</span>

<span class="token property">&#x6CE8;&#x610F;</span><span class="token punctuation">:</span><span class="token property">a</span><span class="token punctuation">:</span>hover &#x5FC5;&#x987B;&#x4F4D;&#x4E8E; <span class="token property">a</span><span class="token punctuation">:</span>link &#x548C; <span class="token property">a</span><span class="token punctuation">:</span>visited &#x4E4B;&#x540E;<span class="token punctuation">,</span><span class="token property">a</span><span class="token punctuation">:</span>active &#x5FC5;&#x987B;&#x4F4D;&#x4E8E; <span class="token property">a</span><span class="token punctuation">:</span>hover &#x4E4B;&#x540E;
<span class="token property">background-color</span><span class="token punctuation">:</span>#B2FF99<span class="token selector">; &#x8FD8;&#x53EF;&#x4EE5;&#x540C;&#x65F6;&#x8BBE;&#x7F6E;&#x80CC;&#x666F;&#x989C;&#x8272;,&#x5B57;&#x4F53;,&#x989C;&#x8272;,&#x5927;&#x5C0F;&#x7B49;.

&#x9AD8;&#x7EA7;&#x94FE;&#x63A5;&#x6846;&#x4F8B;&#x5B50;:
a:link,a:visited</span>
<span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span>14px<span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span>Verdana<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span>#98bf21<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>4px<span class="token punctuation">;</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">a:hover,a:active</span><span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span>#7A991A<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre>
</li>
<li><h3 id="css&#x5217;&#x8868;"><a name="css&#x5217;&#x8868;" class="anchor-navigation-ex-anchor" href="#css&#x5217;&#x8868;"><i class="fa fa-link" aria-hidden="true"></i></a>css&#x5217;&#x8868;</h3>
</li>
<li><pre class="language-"><code class="lang-css"><span class="token property">&#x65E0;&#x5E8F;&#x5217;&#x8868;</span><span class="token punctuation">:</span>&lt;ul class=<span class="token string">&quot;disc&quot;</span>&gt;&lt;li&gt;
<span class="token property">list-style-type</span><span class="token punctuation">:</span>disc/circle/square/none<span class="token punctuation">;</span> &#x5206;&#x522B;&#x4EE3;&#x8868;&#x5B9E;&#x5FC3;&#x5706;<span class="token punctuation">,</span>&#x7A7A;&#x5FC3;&#x5706;<span class="token punctuation">,</span>&#x5B9E;&#x5FC3;&#x6B63;&#x65B9;&#x5F62;<span class="token punctuation">,</span>&#x65E0;
<span class="token property">&#x6709;&#x5E8F;&#x5217;&#x8868;</span><span class="token punctuation">:</span>&lt;ol class=<span class="token string">&quot;decimal&quot;</span>&gt;&lt;li&gt;
<span class="token property">list-style-type</span><span class="token punctuation">:</span>decimal/lower-roman/upper-roman/lower-alpha/upper-alpha<span class="token punctuation">;</span>&#x5206;&#x522B;1<span class="token punctuation">,</span>i<span class="token punctuation">,</span>I<span class="token punctuation">,</span>a<span class="token punctuation">,</span>A
<span class="token property">&#x81EA;&#x5B9A;&#x4E49;&#x56FE;&#x7247;</span><span class="token punctuation">:</span>
<span class="token property">list-style-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>&apos;image_url&apos;<span class="token punctuation">)</span></span>

<span class="token property">list-style-position</span><span class="token punctuation">:</span> outside/inside<span class="token punctuation">;</span> &#x5206;&#x522B;&#x4EE3;&#x5217;&#x8868;&#x5728;&#x5916;&#x90E8;&#x548C;&#x5185;&#x90E8;
</code></pre>
</li>
<li><h3 id="css&#x8868;&#x683C;content"><a name="css&#x8868;&#x683C;content" class="anchor-navigation-ex-anchor" href="#css&#x8868;&#x683C;content"><i class="fa fa-link" aria-hidden="true"></i></a>css&#x8868;&#x683C;\\\content</h3>
</li>
<li><pre class="language-"><code class="lang-css"><span class="token property">border</span><span class="token punctuation">:</span>1px solid blue<span class="token punctuation">;</span> &#x53CC;&#x7EBF;&#x6761;&#x8FB9;&#x6846;&#x8868;&#x683C;<span class="token punctuation">,</span>&#x5B9E;&#x5FC3;<span class="token punctuation">,</span>&#x84DD;&#x8272;
<span class="token property">border-collapse</span><span class="token punctuation">:</span>collapse<span class="token punctuation">;</span> &#x5408;&#x5E76;&#x6210;&#x5355;&#x7EBF;&#x6761;&#x8868;&#x683C;
width/<span class="token property">height</span><span class="token punctuation">:</span>100%/50px<span class="token punctuation">;</span> &#x5BBD;&#x5EA6;<span class="token punctuation">,</span>&#x9AD8;&#x5EA6;
<span class="token property">text-align</span><span class="token punctuation">:</span>right/left/center<span class="token punctuation">;</span> &#x6587;&#x672C;&#x5BF9;&#x9F50;
<span class="token property">padding</span><span class="token punctuation">:</span>15px<span class="token punctuation">;</span> &#x8868;&#x683C;&#x5185;&#x95F4;&#x8DDD;
<span class="token property">background-color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span>white<span class="token selector">;
&#x8868;&#x683C;&#x6807;&#x9898;:
caption</span><span class="token punctuation">{</span><span class="token property">caption-side</span><span class="token punctuation">:</span>bottom<span class="token punctuation">}</span>
&lt;caption&gt;This is a caption&lt;/caption&gt;&#x5728;table&#x4E0E;tr&#x4E4B;&#x95F4;&#x63D2;&#x5165;

<span class="token property">&#x8F6E;&#x5ED3;</span><span class="token punctuation">:</span>
<span class="token property">outline</span><span class="token punctuation">:</span>#00ff00 dotted thick<span class="token punctuation">;</span>
<span class="token property">outline-style</span><span class="token punctuation">:</span>dotted<span class="token punctuation">;</span><span class="token property">outline-color</span><span class="token punctuation">:</span>#00ff00<span class="token punctuation">;</span><span class="token property">outline-width</span><span class="token punctuation">:</span>thin<span class="token punctuation">;</span>
</code></pre>
</li>
<li></li>
</ul>
<footer class="page-footer"><span class="copyright">Copyright &#xA9; AGou 2020 all right reserved&#xFF0C;powered by Gitbook</span><span class="footer-modification">&#x8BE5;&#x6587;&#x4EF6;&#x4FEE;&#x8BA2;&#x65F6;&#x95F4;&#xFF1A;
2020-03-02 20:42:24
</span></footer>
                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="./" class="navigation navigation-prev " aria-label="Previous page: 网站服务器">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="WEB基础.html" class="navigation navigation-next " aria-label="Next page: WEB基础">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"HTML基础","level":"1.7.1","depth":2,"next":{"title":"WEB基础","level":"1.7.2","depth":2,"path":"WEB_Server/WEB基础.md","ref":"WEB_Server/WEB基础.md","articles":[]},"previous":{"title":"网站服务器","level":"1.7","depth":1,"path":"WEB_Server/README.md","ref":"WEB_Server/README.md","articles":[{"title":"HTML基础","level":"1.7.1","depth":2,"path":"WEB_Server/HTML基础.md","ref":"WEB_Server/HTML基础.md","articles":[]},{"title":"WEB基础","level":"1.7.2","depth":2,"path":"WEB_Server/WEB基础.md","ref":"WEB_Server/WEB基础.md","articles":[]},{"title":"httpd/Apache","level":"1.7.3","depth":2,"path":"WEB_Server/httpd.md","ref":"WEB_Server/httpd.md","articles":[]},{"title":"httpd.conf文件详解","level":"1.7.4","depth":2,"path":"WEB_Server/httpd.conf文件详解.md","ref":"WEB_Server/httpd.conf文件详解.md","articles":[]},{"title":"Nginx","level":"1.7.5","depth":2,"path":"WEB_Server/Nginx.md","ref":"WEB_Server/Nginx.md","articles":[]},{"title":"HTTP状态码-详情","level":"1.7.6","depth":2,"path":"WEB_Server/HTTP状态码-详情.md","ref":"WEB_Server/HTTP状态码-详情.md","articles":[]}]},"dir":"ltr"},"config":{"plugins":["github@^2.0.0","edit-link@^2.0.2","anchors@^0.7.1","include-codeblock@^3.0.2","tbfed-pagefooter@^0.0.1","expandable-chapters-small@^0.1.7","anchor-navigation-ex@0.1.8","prism","-highlight","insert-logo","-lunr","-search","search-pro","splitter","lightbox","github-buttons","-sharing","sharing-plus","donate","code","-klipse","livereload"],"root":".","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"tbfed-pagefooter":{"copyright":"Copyright © AGou 2020","modify_label":"该文件修订时间：","modify_format":"YYYY-MM-DD HH:mm:ss"},"prism":{"css":["prismjs/themes/prism-tomorrow.css"]},"github":{"url":"https://github.com/AGou-ops"},"livereload":{},"splitter":{},"search-pro":{},"sharing-plus":{"qq":false,"all":["facebook","google","twitter","instapaper","linkedin","pocket","stumbleupon"],"douban":false,"facebook":true,"weibo":false,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":true,"messenger":false,"line":false,"vk":false,"pocket":true,"google":false,"viber":false,"stumbleupon":false,"qzone":false,"linkedin":false},"code":{"copyButtons":true},"donate":{"alipay":"https://agou-ops.github.io/images/alipay.png","alipayText":"支付宝打赏","button":"打赏","title":"","wechat":"https://agou-ops.github.io/images/wechatpay.png","wechatText":"微信打赏"},"fontsettings":{"theme":"white","family":"sans","size":2},"anchor-navigation-ex":{"isRewritePageTitle":true,"tocLevel1Icon":"fa fa-hand-o-right","tocLevel2Icon":"fa fa-hand-o-right","tocLevel3Icon":"fa fa-hand-o-right"},"lightbox":{"jquery":true,"sameUuid":false},"github-buttons":{"repo":"AGou-ops/myStudyNote","types":["star","watch","fork"],"size":"small"},"expandable-chapters-small":{},"include-codeblock":{"check":false,"edit":true,"fixlang":false,"lang":"","template":"ace","theme":"chrome","unindent":true},"sharing":{"qq":true,"all":["douban","facebook","google","hatenaBookmark","instapaper","linkedin","twitter","weibo","messenger","qq","qzone","viber","vk","weibo","pocket","stumbleupon","whatsapp"],"douban":false,"facebook":false,"weibo":true,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":false,"messenger":false,"line":false,"vk":false,"pocket":false,"google":false,"viber":false,"stumbleupon":false,"qzone":true,"linkedin":false},"edit-link":{"label":"Edit This Page","base":"https://github.com/AGou-ops/myStudyNote"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":true},"anchors":{},"insert-logo":{"style":"background: none; max-height: 50px; min-height: 50px","url":"https://s2.ax1x.com/2019/12/10/QBD0xO.jpg"}},"theme":"default","author":"AGou","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"AGou's StudyNote","language":"zh-hans","output.name":"site","links":{"sidebar":{"◆点击进入我的个人博客":"http://agou-ops.github.io"}},"gitbook":"3.2.3","description":"岂能尽如人意，但求无愧我心。"},"file":{"path":"WEB_Server/HTML基础.md","mtime":"2020-03-02T12:42:24.296Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-03-02T12:42:32.383Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-expandable-chapters-small/expandable-chapters-small.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-insert-logo/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-pro/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-splitter/splitter.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lightbox/js/lightbox.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-github-buttons/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing-plus/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-donate/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-code/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

